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.
