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:
Index |
Parameter |
Type |
Description |
1) |
openIn |
string |
It defines how to open an Autocomplete which could be used as dropdown, popup or page. |
2) |
source |
function (autocomplete, query, render) |
It uses autocomplete instance, search query and renders function to pass matched items with array. |
3) |
valueProperty |
string |
It specifies the item value of matched item object's key. |
4) |
limit |
number |
It displays the limited number of items in autocomplete per query. |
5) |
preloader |
boolean |
Preloader can be used to specify autocomplete layout by setting it to true. |
6) |
preloaderColor |
string |
It specifies the preloader color. By default, the color is "black". |
7) |
value |
array |
Defines the array with default selected values. |
8) |
textProperty |
string |
It specifies the item value of matched item object's key, which can be used as a title of displayed options. |
Standalone Autocomplete Parameters
Index |
Parameter |
Type |
Description |
1) |
opener |
string or HTMLElement |
It is string or html element parameter, which will open the standalone autocomplete page. |
2) |
popupclosetext |
string |
It is used to close the autocomplete popup. |
3) |
backtext |
string |
It provides the back link when autocomplete is opened as page. |
4) |
pagetitle |
string |
It specifies the autocomplete page title. |
5) |
searchbarplaceholdertext |
string |
It specifies the search bar placeholder text. |
6) |
searchbarcanceltext |
string |
It defines the search bar cancel button text. |
7) |
notfoundtext |
string |
It displays the text when there is no matched element found. |
8) |
multiple |
boolean td>
| It allows to select multiple selection by setting it to true. |
9) |
navbartheme |
string |
It specifies the color theme for navbar. |
10) |
backonselect |
boolean |
When the user picks value, the autocomplete will be closed by setting it to true. |
11) |
formtheme |
string |
It specifies the color theme for form. |
Dropdown Autocomplete Parameters
A list of dropdown autocomplete parameter:
Index |
Parameter |
Type |
Description |
1) |
input |
string or HTML Element |
It is string or HTML element used for text input. |
2) |
dropdownPlaceholderText |
string |
It specifies the dropdown placeholder text. |
3) |
updateInputValueOnSelect |
boolean |
It is used to update the input value on select by setting it to true. |
4) |
expandInput |
boolean |
You 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
Index |
Parameter |
Type |
Description |
1) |
onChange |
function (autocomplete, value) |
Whenever the autocomplete value is changed, this callback function will be executed. |
2) |
onOpen |
function (autocomplete) |
Whenever autocomplete is opened, this callback function will be executed. |
3) |
onClose |
function (autocomplete) |
Whenever autocomplete is closed, this callback function will be executed. |
Autocomplete Templates
Index |
Parameter |
Type |
Description |
1) |
navbarTemplate |
string |
It is standalone autocomplete navbar template. |
2) |
itemTemplate |
string |
It is standalone template7 form item. |
3) |
dropdownTemplate |
string |
It is template7 dropdown template. |
4) |
dropdownItemTemplate |
string |
It is template7 dropdown list item. |
5) |
dropdownPlaceholderTemplate |
string |
It is template7 dropdown placeholder item. |
Autocomplete Properties
Following is a list of autocomplete properties in Framework7:
Index |
Properties |
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 Methods
Following is a list of autocomplete methods:
Index |
Methods |
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. |
Autocomplete Example
Let's take an example to demonstrate the use of all the autocomplete parameters in the Framework7:
Test it Now
|