Description
Autocomplete is a Framework7's mobile friendly and touch optimized component which can be as dropdown or in standalone way. You can create and initialize Autocomplete instance by using the JavaScript method:myApp.autocomplete(parameters)Where parameters are required object used to initialize the Autocomplete instance.
Autocomplete Parameters
The below table lists available Autocomplete parameters in Framework7:| S.N. | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 | openIn It defines how to open an Autocomplete which could be used as dropdown, popup or page. |
string | page |
| 2 | source It uses autocomplete instance, search query and render function to pass matched items with array. |
function (autocomplete, query, render) | - |
| 3 | valueProperty It specifies item value of matched item object's key. |
string | id |
| 4 | limit It displays the limited number of items in autocomplete per query. |
number | - |
| 5 | preloader Preloader can be used to specify autocomplete layout by setting it to true. |
boolean | false |
| 6 | preloaderColor It specifies preloader color. By default color is "black". |
string | - |
| 7 | value Defines the array with default selected values. |
array | - |
| 8 | textProperty It specifies item value of matched item object's key which can be used as title of displayed options. |
string | text |
Standalone Autocomplete Parameters
The below table lists available Standalone Autocomplete parameters in Framework7:| S.N. | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 | opener It is string or HTML element parameter which will open the standalone autocomplete page. |
string or HTMLElement | - |
| 2 | popupCloseText It is used to close the autocomplete popup. |
string | 'Close' |
| 3 | backText It provides back link when autocomplete is opened as page. |
string | 'Back' |
| 4 | pageTitle It specifies the autocomplete page title. |
string | - |
| 5 | searchbarPlaceholderText It specifies the search bar placeholder text. |
string | 'Search' |
| 6 | searchbarCancelText It defines the search bar cancel button text. |
string | 'cancel' |
| 7 | notFoundText It displays the text when there is no matched element found. |
string | 'Nothing found' |
| 8 | multiple it allows to select multiple selection by setting it to true. |
boolean | false |
| 9 | navbarTheme It specifies the color theme for navbar. |
string | - |
| 10 | backOnSelect When user picks value, the autocomplete will be closed by setting it to true. |
boolean | false |
| 11 | formTheme It specifies the color theme for form. |
string | - |
Dropdown Autocomplete Parameters
The below table lists available Dropdown Autocomplete parameters in Framework7:| S.N. | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 | input It is string or HTML element used for text input. |
string or HTMLElement | - |
| 2 | dropdownPlaceholderText It specifies the dropdown placeholder text. |
string | - |
| 3 | updateInputValueOnSelect You can update the input value on select by setting it to true. |
boolean | true |
| 4 | expandInput You can expand the text input in List View to make full screen wide during dropdown visible by setting item-input it to true. |
boolean | false |
Autocomplete Callbacks Functions
The below table lists available Dropdown Autocomplete parameters in Framework7:| S.N. | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 | onChange Whenever autocomplete value changed, this callback function will be executed. |
function (autocomplete, value) | - |
| 2 | onOpen Whenever autocomplete is opened, this callback function will be executed. |
function (autocomplete) | - |
| 3 | onClose Whenever autocomplete is closed, this callback function will be executed. |
function (autocomplete) | - |
Autocomplete Templates
The below table lists available Dropdown Autocomplete parameters in Framework7:| S.N. | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 | navbarTemplate It is standalone autocomplete navbar template. |
string | - |
| 2 | itemTemplate It is standalone template7 form item. |
string | - |
| 3 | dropdownTemplate It is template7 dropdown template. |
string | - |
| 4 | dropdownItemTemplate It is template7 dropdown list item. |
string | - |
| 5 | dropdownPlaceholderTemplate It is template7 dropdown placeholder item. |
string | - |
Default templates
Following are the default template code snippet for the above defined templates parameters:navbarTemplate
<div class="navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}"> <div class="navbar-inner"> <div class="left sliding"> {{#if material}} <a href="#" class="link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only"> <i class="icon icon-back"></i> </a> {{else}} <a href="#" class="link {{#if inPopup}}close-popup{{else}}back{{/if}}"> <i class="icon icon-back"></i> {{#if inPopup}} <span>{{popupCloseText}}</span> {{else}} <span>{{backText}}</span> {{/if}} </a> {{/if}} </div> <div class="center sliding">{{pageTitle}}</div> {{#if preloader}} <div class="right"> <div class="autocomplete-preloader preloader {{#if preloaderColor}}preloader-{{preloaderColor}}{{/if}}"></div> </div> {{/if}} </div> </div>
itemTemplate
<li> <label class="label-{{inputType}} item-content"> <input type="{{inputType}}" name="{{inputName}}" value="{{value}}" {{#if selected}}checked{{/if}}> {{#if material}} <div class="item-media"> <i class="icon icon-form-{{inputType}}"></i> </div> <div class="item-inner"> <div class="item-title">{{text}}</div> </div> {{else}} {{#if checkbox}} <div class="item-media"> <i class="icon icon-form-checkbox"></i> </div> {{/if}} <div class="item-inner"> <div class="item-title">{{text}}</div> </div> {{/if}} </label> </li>'
dropdownTemplate
<div class="autocomplete-dropdown"> <div class="autocomplete-dropdown-inner"> <div class="list-block"> <ul></ul> </div> </div> {{#if preloader}} <div class="autocomplete-preloader preloader {{#if preloaderColor}}preloader-{{preloaderColor}}{{/if}}"> {{#if material}}{{materialPreloaderHtml}}{{/if}} </div> {{/if}} </div>
dropdownItemTemplate
&<li> <label class="{{#unless placeholder}}label-radio{{/unless}} item-content" data-value="{{value}}"> <div class="item-inner"> <div class="item-title">{{text}}</div> </div> </label> </li>
dropdownPlaceholderTemplate
<li class="autocomplete-dropdown-placeholder"> <div class="item-content"> <div class="item-inner"> <div class="item-title">{{text}}</div> </div> </label> </li>
Autocomplete Methods
The following table specifies Autocomplete methods available in Framework7:| S.N. | Methods & Description |
|---|---|
| 1 | myAutocomplete.params Defines the initialization parameters that are passes with object. |
| 2 | myAutocomplete.value It defines the array with selected values. |
| 3 | myAutocomplete.opened It opens the Autocomplete if it is set to true. |
| 4 | myAutocomplete.dropdown It specifies an instance of Autocomplete dropdown. |
| 5 | myAutocomplete.popup It specifies an instance of Autocomplete popup. |
| 6 | myAutocomplete.page It specifies an instance of Autocomplete page. |
| 7 | myAutocomplete.pageData It defines Autocomplete page data. |
| 8 | myAutocomplete.searchbar It defines Autocomplete searchbar instance. |
Autocomplete Properties
The following table specifies Autocomplete methods available in Framework7:| S.N. | Properties & Description |
|---|---|
| 1 | myAutocomplete.open() It opens the Autocomplete which could be used as dropdown, popup or page. |
| 2 | myAutocomplete.close() It closes the Autocomplete. |
| 3 | myAutocomplete.showPreloader() It shows the Autocomplete preloader. |
| 4 | myAutocomplete.hidePreloader() It hides the Autocomplete preloader. |
| 5 | myAutocomplete.destroy() It ruins the Autocomplete preloader instance and removes all events. |
Example
The below example demonstrates use of autocomplete parameters hiding in the Framework7:<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>Autocomplete</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"> </head> <body> <div class="views"> <div class="view view-main"> <div class="pages"> <div data-page="home" class="page navbar-fixed"> <div class="navbar"> <div class="navbar-inner"> <div class="left"> </div> <div class="center">Autcomplete</div> <div class="right"> </div> </div> </div> <div class="page-content"> <div class="content-block-title">Simple Dropdown Autocomplete</div> <div class="list-block"> <ul> <li class="item-content"> <div class="item-title label">Country</div> <div class="item-input"> <input type="text" placeholder="Country" id="autocomplete-dropdown"> </div> </li> </ul> </div> <div class="content-block-title">Dropdown With Input Expand</div> <div class="list-block"> <ul> <li class="item-content"> <div class="item-title label">Country</div> <div class="item-input"> <input type="text" placeholder="Country" id="autocomplete-dropdown-expand"> </div> </li> </ul> </div> <div class="content-block-title">Dropdown With All Values</div> <div class="list-block"> <ul> <li class="item-content"> <div class="item-title label">Country</div> <div class="item-input"> <input type="text" placeholder="Country" id="autocomplete-dropdown-all"> </div> </li> </ul> </div> <div class="content-block-title">Dropdown With Placeholder</div> <div class="list-block"> <ul> <li class="item-content"> <div class="item-title label">Country</div> <div class="item-input"> <input type="text" placeholder="Country" id="autocomplete-dropdown-placeholder"> </div> </li> </ul> </div> <div class="content-block-title">Simple Standalone Autocomplete</div> <div class="list-block"> <ul> <li> <a href="#" id="autocomplete-standalone" class="item-link item-content autocomplete-opener"> <input type="hidden"> <div class="item-inner"> <div class="item-title">Favorite Country</div> <div class="item-after"></div> </div> </a> </li> </ul> </div> <div class="content-block-title">Popup Standalone Autocomplete</div> <div class="list-block"> <ul> <li> <a href="#" id="autocomplete-standalone-popup" class="item-link item-content autocomplete-opener"> <input type="hidden"> <div class="item-inner"> <div class="item-title">Favorite Country</div> <div class="item-after"></div> </div> </a> </li> </ul> </div> <div class="content-block-title">Multiple Values Standalone Autocomplete</div> <div class="list-block"> <ul> <li> <a href="#" id="autocomplete-standalone-multiple" class="item-link item-content autocomplete-opener"> <input type="hidden"> <div class="item-inner"> <div class="item-title">Favorite Countries</div> <div class="item-after"></div> </div> </a> </li> </ul> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script> <script> var myApp = new Framework7(); var $$ = Dom7; var mainView = myApp.addView('.view-main'); // Countries data array var countries = ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' '); // Simple Dropdown var autocompleteDropdownSimple = myApp.autocomplete({ input: '#autocomplete-dropdown', openIn: 'dropdown', source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); } }); // Dropdown with input expand var autocompleteDropdownExpand = myApp.autocomplete({ input: '#autocomplete-dropdown-expand', openIn: 'dropdown', expandInput: true, // expandInput used as item-input in List View will be expanded to full screen wide //during dropdown source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // Find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); } }); // Dropdown with all values var autocompleteDropdownAll = myApp.autocomplete({ input: '#autocomplete-dropdown-all', openIn: 'dropdown', source: function (autocomplete, query, render) { var results = []; // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); } }); // Dropdown with placeholder var autocompleteDropdownPlaceholder = myApp.autocomplete({ input: '#autocomplete-dropdown-placeholder', openIn: 'dropdown', dropdownPlaceholderText: 'Type as "India"', source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); } }); // Simple Standalone var autocompleteStandaloneSimple = myApp.autocomplete({ openIn: 'page', //open in page opener: $$('#autocomplete-standalone'), //link that opens autocomplete backOnSelect: true, //go back after we select something source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); }, onChange: function (autocomplete, value) { // Here add the item text value to item-after $$('#autocomplete-standalone').find('.item-after').text(value[0]); // You can add item value to input value $$('#autocomplete-standalone').find('input').val(value[0]); } }); // Standalone Popup var autocompleteStandalonePopup = myApp.autocomplete({ openIn: 'popup', // Opens the Autocomplete in page opener: $$('#autocomplete-standalone-popup'), // It will open standalone autocomplete popup backOnSelect: true, //After selecting item, then go back to page source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); }, onChange: function (autocomplete, value) { // Here add the item text value to item-after $$('#autocomplete-standalone-popup').find('.item-after').text(value[0]); // You can add item value to input value $$('#autocomplete-standalone-popup').find('input').val(value[0]); } }); // Multiple Standalone var autocompleteStandaloneMultiple = myApp.autocomplete({ openIn: 'page', //Opens the Autocomplete in page opener: $$('#autocomplete-standalone-multiple'), //link that opens autocomplete multiple: true, //Allow multiple values source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); }, onChange: function (autocomplete, value) { // Here add the item text value to item-after $$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', ')); // You can add item value to input value $$('#autocomplete-standalone-multiple').find('input').val(value.join(', ')); } }); </script> </body> </html>
Output
Let's carry out the following steps to see how above code works:- Save above HTML code as autocomplete.html file in your server root folder.
- Open this HTML file as http://localhost/autocomplete.html and output as below gets displayed.
- The example provides autocomplete of values in simple dropdown, dropdown with all values, dropdown with placeholder, standalone autocomplete etc.
No comments:
Post a Comment