Javatpoint Logo
Javatpoint Logo

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




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA