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.
