autocomplete ^v3.0.0

Basic example

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

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

Show clear button on initial

A parameter clearButtonOnInitial set to true adds a button to remove text from the input field visible on initial Autocomplete. What to use for? For example, when we set text in the root field.

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

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

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

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

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

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

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

Rerender

This method const auto = new Autocomplete('id', {...}); auto.rerender(); allows you to re-render the results without modifying the input field. If we pass text rerender(string); then we render the results again and also replace the text in the input field.

Remove results when input is empty

Set to true, this parameter removeResultsWhenInputIsEmpty deletes the results when input is epty. We use the destroy() method which removes the results from the DOM and returns everything to its original state.

Regex

regex - the parameter allows you modify string before search. For example, we can remove special characters from the string. Default value is object { expression: /[|\\{}()[\]^$+*?]/g, replacement: "\\$&" } You can add only expression or only replacement.

Prevent scroll up

Parameter prevents the results from scrolling up when we have scrolling. It also works when we click a second time when we have results. The results are shown in the same place.

Recent Searches

An example showing how to easily add "Recent Searches", for this we will use part of the code from the Header/Footer example. Each click on an element shows the data in the header, we always show two elements. Of course, this is just a very simple example, instead of adding an array of clicked items to localStorage, add a delete button like google does.

Local data

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

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 on click

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.

Cache data

1. CACHE_TTL: Defines the cache's time-to-live (TTL) as 60 seconds.
2. Cache Check:
   1. The function checks if the query (query) exists in sessionStorage and if it is not outdated (i.e., not older than 60 seconds).
   2. If the data is still valid, it is returned directly from the cache.
3. Fetching Data from the API:
   1. If the data is not in the cache or is outdated, the function makes a request to the API (in this case, the "Rick and Morty" API).
   2. The retrieved results are saved to sessionStorage with the current timestamp.
   Open devTools in chrome. Find Application -> Session storage and see how the data is saved. Of course, the data is only in the session, so if I close the tab, the data is deleted. You can change it to Local storage or even save it in memory, but it's up to you how you save the data.

Show inline

Using the "inline:true" option causes the results to appear immediately below the input field. It should be mentioned that loading the first results does not take into account the "delay" parameter, only the search takes this parameter into account.

Update input field on selected items

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

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.

Multiple choices

This example allows you to select multiple choices 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

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

Special characters

The example shows how to remove accents/diacritics. What is it good for? Instead of entering, for example, umlauts "Jö" we will write "Jo" and search for "Jörn Zaefferer"