Autocomplete
autoComplete.js) is a simple, pure vanilla
Javascript library progressively designed for speed, high versatility, and seamless
integration with a wide range of projects & systems. It has no dependencies, includes
powerful search engine with two different modes, is highly customizable and works with
regular inputs (text field, textarea and contentEditable elements).Simple example of search field with autocomplete. Includes a few overrides of default options to make it work like a regular suggestion engine: highlight of matching bit and display selected item in the field value.
By default, autocomplete displays the list of mathing results,
but doesn't update input value when menu item is selected. This can be
changed via selection input event. This example shows the
default behaviour.
Threshold option is responsible for setting threshold value of
the minimum characters length where autoComplete.js engine
starts. In this example threshold value is set to 3. Type
nia to see it in action
Debounce option is responsible for setting delay time duration
(in milliseconds) that counts after typing is done for
autoComplete.js engine to start. Default value is
0, in this example it's set to 500ms.
SearchEngine option is responsible for setting the Search engine
Type/Mode or custom engine. Supports strict (default) and
loose modes. In this example searchEngine option
is set to loose.
The library includes onfocus event, which provides
extra customization of search results. In this example results list is
triggered on focus when suggestion is selected. Choose some country and then
click on input field.
With additional configuration of query option and
selection event, search field can support multiple selection
separated by comma. Example below demonstrates this behaviour.
Display total number of matches and current count of maximum
displayed items set in JS configuration. Works in combination with
maxResults option that sets the limit of items displayed in the
menu.
The message that is shown to the user when search query doesn't
match any data entry can be easily customized via resultsList
set of options. Type "Sweden" to see it in action
By default, autocomplete doesn't highlight matching characters
in the list of results, but shows the list of general matches. To change
this behaviour, set highlight option to true in
resultItem option.
This example loads external JSON file with a list of countries.
You can easily customize appearance of results and selection, add dynamic
placeholders or loading indicators in data configuration.
External data set includes duplicated value -
Austria. This example filters out all duplicates in data
set and returns a single value. This behaviour can be easily achieved with
filter configuration option
Results list can include search history in a simple list format.
You can customize its appearance in resultsList option and
selection event. Select some country and then trigger the menu
again.
The data can be filtered in a way that the list will include only the exact query starting from the 1st word. If you type A, United Arab Emirates will be ignored since the 1st letter in the 1st word doesn't contain that query.
