Framework7 AutocompleteIn 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 Framework7Following 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 ParametersIndex | 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 ParametersA 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 FunctionsIndex | 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 TemplatesIndex | 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 PropertiesFollowing 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 MethodsFollowing 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 ExampleLet's take an example to demonstrate the use of all the autocomplete parameters in the Framework7: Test it Now
|