autoComplete.js

How to use autoComplete.js

AutoComplete.js is a lightweight and easy-to-use library that allows you to add autocomplete functionality to text input fields on your website. With AutoComplete.js, you can provide suggestions to users as they type in the input field, making it easier for them to find what they are looking for quickly.

To use AutoComplete.js, you will need to follow these steps:

1. Install AutoComplete.js You can download and install AutoComplete.js from its official website or via npm. Once you have downloaded the library, you will need to include it in your project.

2. Create an input field Next, you will need to create an input field in which users can type their query. You can use any HTML input tag, such as <input> or <textarea>, and give it a unique ID.

3. Initialize AutoComplete.js Once you have created the input field, you will need to initialize AutoComplete.js by passing it the ID of the input field and an object with your configuration options. The configuration options include data source, minimum characters required before displaying suggestions, maximum number of suggestions to display, and more.

4. Define your data source AutoComplete.js needs a data source to provide suggestions to users. The data source can be an array of strings, objects, or a function that returns one of these. You will need to define your data source according to your needs.

5. Bind to events Finally, you will need to bind AutoComplete.js to events such as keyup or focus on the input field. This will ensure that AutoComplete.js starts providing suggestions as soon as the user starts typing or focuses on the input field.

Here is an example code snippet showing how to use AutoComplete.js:

// include autocomplete.js
<script src="autocomplete.min.js"></script>

// create an input field
<input type="text" id="my-input">

// initialize autocomplete.js
<script>
var myInput = document.getElementById('my-input');
new autoComplete({
   data: {                             
      src: async () => {
         // fetch data from API or define data directly
         const response = await fetch('/api/data');
         const data = await response.json();
         return data;
      },
      key: ["name"],                      
   },
   selector: "#my-input",
   threshold: 0,
   debounce: 300,
   searchEngine: "strict",
   resultsList: {
      render: true,
      container: source => {
         source.setAttribute("class", "autocomplete-results");
      },
      destination: myInput,
      position: "afterend",
      element: "ul"
   },
   maxResults: 5,
   highlight: true,
   noResults: () => {
      const result = document.createElement("li");
      result.setAttribute("class", "no-result");
      result.setAttribute("tabindex", "1");
      result.innerHTML = "No Results Found";
      document.querySelector("#autocomplete-results").appendChild(result);
   },
   onSelection: feedback => {
      myInput.value = feedback.selection.value.name;
   }
});
</script>

In this example, AutoComplete.js is used to provide suggestions for names. The data source is defined as an asynchronous function that fetches data from an API. The configuration options include a minimum threshold of 0 characters before displaying suggestions, a debounce time of 300ms before updating the suggestions, and a maximum of 5 suggestions to display. When a suggestion is selected, the input field is updated with the selected name.

In conclusion, AutoComplete.js is a powerful library that can significantly improve user experience on your website by providing autocomplete functionality. By following the steps outlined above and customizing the configuration options according to your needs, you can quickly implement autocomplete functionality on your website.