- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Autocomplete
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 objects used to initialize the Autocomplete instance.
Autocomplete Parameters
The following table lists the available Autocomplete parameters in Framework7 −
S.No | 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 renders function to pass matched items with array. |
function (autocomplete, query, render) | - |
3 | valueProperty It specifies the 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 the preloader color. By default, the color is "black". |
string | - |
7 | value Defines the array with default selected values. |
array | - |
8 | textProperty It specifies the item value of matched item object's key, which can be used as a title of displayed options. |
string | text |
Standalone Autocomplete Parameters
The following table lists the available Standalone Autocomplete parameters in Framework7 −
S.No | 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 the 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 the 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 following table lists the available Dropdown Autocomplete parameters in Framework7 −
S.No | 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.No | Parameters & Description | Type | Default |
---|---|---|---|
1 | onChange Whenever the autocomplete value is 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 following table lists the available Dropdown Autocomplete parameters in Framework7 −
S.No | 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 snippets 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.No | 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.No | 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 following example demonstrates the 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> </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 us carry out the following steps to see how the above given code works −
Save the above given HTML code as autocomplete.html file in your server root folder.
Open this HTML file as http://localhost/autocomplete.html and the output is displayed as shown below.
The example provides autocomplete of values in simple dropdown, dropdown with all values, dropdown with placeholder, standalone autocomplete etc.
To Continue Learning Please Login
Login with Google