autocomplete

Gatting started

Include JS and CSS files

The first thing you should do is download the autocomplete library files. All the necessary files are located in the "docs/js" and "docs/css" folders. If you want to make changes, the uncompiled javascript and sass files are in the sources folder.

<!-- CSS file -->
<link rel="stylesheet" href="path/to/autocomplete.css">

<!-- JS file -->
<script src="path/to/autocomplete.min.js"></script>

-- OR CDN --

<!-- CSS file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tomik23/autocomplete@master/docs/css/autocomplete.css"/>

<!-- JS file -->
<script src="https://cdn.jsdelivr.net/gh/tomik23/autocomplete@master/docs/js/autocomplete.min.js"></script>

If you want on older browsers - IE use polyfills

<script>
  if (!('Promise' in window)) {
    var script = document.createElement('script');
    script.src =
      'https://polyfill.io/v3/polyfill.min.js?features=Promise%2CElement.prototype.closest';
    document.getElementsByTagName('head')[0].appendChild(script);
  }
</script>

-- OR --

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-closest@3.0.2/browser.min.js"></script>

-- OR --

<script src="path/to/polyfill.js"></script>

Configuration of the plugin

Settings:

Callbacks function:

Public methods:

Explanation of the variables:

Basic example

source: basic

In fact, the input <input type="text" id="basic" placeholder="type w"> field is enough to add a search engine. The div surrounding the input field controls the appearance of this field and also the appearance of the "loupe" icons and the button with which we can clear the x field, as well as the possibility of an animation waiting for the results before our REST API returns us.

Complex example

source: complex

search - this class is responsible for the appearance of the input field

max-height - this class is responsible for the maximum height of the div in which the results appear, if there are many results, we can also scroll using the up/down arrows

loupe - this class shows a "loupe" icon that appears in the input field on the left

No results

source: no-results

Adding no result is a bit more complicated, so it is included in the examples. First, add the noResults method, then in the onResults method we check whether maches returns zero results, if so, it is enough to make a comparison of return matches === 0 ? template : matches

Now you just need to type in non-existent text, and no results will be displayed, only "no results" information.

Static file

source: static

Instead of the REST API, you can use a static files const api='./characters.json'Due to the fact that we download the entire json file locally, we should add sorting and filtering the results.

We can add sorting and filtering in two ways. In the onSearch or onResults method.

Static file + data-elements

source: static-file-data

You want to download all the data, nothing easier. You can do it in the onSubmit method by clicking the mouse on the element, or by pressing enter when the element is selected, but also in the onSelectedItem method.

That is, selecting an element, either with the mouse or by jumping on the elements with the arrows.

Open the console and see what happens during these events.

Data grouping

source: group

First, we declare the class of group members classGroup: 'group-by'

Then we sort by our group, in our case it will be status ['Alive', 'Deceased', 'Presumed dead', 'Unknown'], then we sort by name. Of course, it is not always needed, because we should get such soroting from our api 'REST API'

The next thing is the onResults method which returns the third element of the group class name which will prevent moving between result records with the arrow and with the mouse. This class should be added to the group items.

Dynamic list position

source: dynamic-list-position

Dynamic display of results, and precisely the position of these results. The simplest thing is that the results, if they do not fit in the page view, under the input field, will be displayed above this field.

Move the page so that the input field is near the bottom of the window. Do a search, the results should appear above the input field.

Number of records from the result

source: records-from-the-result

This example shows only the top 7 records of the total number of matched results.
For example, when searching for 'w', it would find 13 records but only 7 records are shown.

Header/Footer

source: header/footer

Add adding additional DOM elements to the code. A callback function is used for this onRender: ({ element, results }) {} This function is only called once.

Local data

source: local

Not only json file or rest api, but also data can be downloaded locally. Also in this case, you need to sort and filter the data.

Modal

source: modal

To get this effect, add to html <div class="modal"></div> preferably somewhere at the bottom of the page. For this we also needonOpened and onClose. Using the first function, we add a class that causes the modal to show up, and the second class removes the visibility of the modal.

Show all values

source: show-all-values

This option will toggle showing all values when the input is clicked, like a default dropdown.

Please note that only the first element is added to the input field, in this case we want only the country code to be added.
To get the following effect in the results, i.e. first the state flag, then the name of the country and then the code, use the styles. Just use the flex + order property. Order is responsible for the proper sorting of elements.

Update input field on selected items

source: update-input

Adding this parameter adds the selected data to the input field while navigating through the records with the up/down arrows insertToInput: true

If you want to be able to add data to the input field after hovering the mouse over the record, you can do it using callback funciton onSelectedItem: ({ element, object }) => {element.value = object.name}

Select multiple values ver 1

source: select

This example allows you to select multiple elements that are added below the input field. To remove all elements just click button clear x or delete elements one by one by clicking the button x which are next to the name of the taken elements.

Select multiple values ver 2

source: multiple-values

This example allows you to select multiple elements that are added to the input field, to remove the selected fields, clear them by pressing the clear x button or by removing the element or elements from the input field.

Checkboxes

source: checkbox

This example shows what you can use the disableCloseOnSelect variable - checkbox list.

Address geocoding

Below is an example of how to combine city geocoding with the AUTOCOMPLETE library. In fact, there are many ideas for using it ;)