Framework7 Autocomplete

In Framework7, autocomplete is a 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:

Here, parameters are required objects used to initialize the Autocomplete instance.


Autocomplete Parameters in Framework7

Following is a list of autocomplete parameters in Framework7:

IndexParameterTypeDescription
1)openInstringIt defines how to open an Autocomplete which could be used as dropdown, popup or page.
2)sourcefunction (autocomplete, query, render)It uses autocomplete instance, search query and renders function to pass matched items with array.
3)valuePropertystringIt specifies the item value of matched item object's key.
4)limitnumberIt displays the limited number of items in autocomplete per query.
5)preloaderbooleanPreloader can be used to specify autocomplete layout by setting it to true.
6)preloaderColorstringIt specifies the preloader color. By default, the color is "black".
7)valuearrayDefines the array with default selected values.
8)textPropertystringIt specifies the item value of matched item object's key, which can be used as a title of displayed options.

Standalone Autocomplete Parameters

IndexParameterTypeDescription
1)openerstring or HTMLElementIt is string or html element parameter, which will open the standalone autocomplete page.
2)popupclosetextstringIt is used to close the autocomplete popup.
3)backtextstringIt provides the back link when autocomplete is opened as page.
4)pagetitlestringIt specifies the autocomplete page title.
5)searchbarplaceholdertextstringIt specifies the search bar placeholder text.
6)searchbarcanceltextstringIt defines the search bar cancel button text.
7)notfoundtextstringIt displays the text when there is no matched element found.
8)multipleboolean td>It allows to select multiple selection by setting it to true.
9)navbarthemestringIt specifies the color theme for navbar.
10)backonselectbooleanWhen the user picks value, the autocomplete will be closed by setting it to true.
11)formthemestringIt specifies the color theme for form.

Dropdown Autocomplete Parameters

A list of dropdown autocomplete parameter:

IndexParameterTypeDescription
1)inputstring or HTML ElementIt is string or HTML element used for text input.
2)dropdownPlaceholderTextstringIt specifies the dropdown placeholder text.
3)updateInputValueOnSelectbooleanIt is used to update the input value on select by setting it to true.
4)expandInputbooleanYou can expand the text input in List View to make full screen wide during dropdown visible by setting item-input it to true.

Autocomplete Callbacks Functions

IndexParameterTypeDescription
1)onChangefunction (autocomplete, value)Whenever the autocomplete value is changed, this callback function will be executed.
2)onOpenfunction (autocomplete)Whenever autocomplete is opened, this callback function will be executed.
3)onClosefunction (autocomplete)Whenever autocomplete is closed, this callback function will be executed.

Autocomplete Templates

IndexParameterTypeDescription
1)navbarTemplatestringIt is standalone autocomplete navbar template.
2)itemTemplatestringIt is standalone template7 form item.
3)dropdownTemplatestringIt is template7 dropdown template.
4)dropdownItemTemplatestringIt is template7 dropdown list item.
5)dropdownPlaceholderTemplatestringIt is template7 dropdown placeholder item.

Autocomplete Properties

Following is a list of autocomplete properties in Framework7:

IndexPropertiesDescription
1)myAutocomplete.paramsDefines the initialization parameters that are passes with object.
2)myAutocomplete.valueIt defines the array with selected values.
3)myAutocomplete.openedIt opens the Autocomplete if it is set to true.
4)myAutocomplete.dropdownIt specifies an instance of Autocomplete dropdown.
5)myAutocomplete.popupIt specifies an instance of Autocomplete popup.
6)myAutocomplete.pageIt specifies an instance of Autocomplete page.
7)myAutocomplete.pageDataIt defines Autocomplete page data.
8)myAutocomplete.searchbarIt defines Autocomplete searchbar instance.

Autocomplete Methods

Following is a list of autocomplete methods:

IndexMethodsDescription
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.

Autocomplete Example

Let's take an example to demonstrate the use of all the autocomplete parameters in the Framework7:

Test it Now




Latest Courses