autocomplete-select v1.0.3

Autocomplete Select

Autocomplete Select is a simple and lightweight JavaScript autocomplete widget.

Installation

Install the package:

npm install autocomplete-select
#or
yarn install autocomplete-select

Import the JS and CSS into your code:

import autocomplete from "autocomplete-select";
import "autocomplete-select/autocomplete.css";

Getting Started

At minimum, call the autocomplete() function with the container and onInput options. The input field will be automatically generated inside the container element:

	//These are the objects from which we will choose suggestions
    const countries = [
    	{id: 1, name: "Australia"},
        {id: 2, name: "Bulgaria"},
        //...
        {id: 236, name: "Zambia"}
    ]
    
    const myContainer = document.getElementById(#my-container);
    
    autocomplete({
    	container: myContainer,
        //Filter suggestions based on user query
        onInput: (query, suggestMatches) => {
            const term = query.toLowerCase();
            const matches = countries.filter(country => {
                return ~country.toLowerCase().indexOf(term)
            })
            const formattedMatches = matches.map(match => match.name);
            //call suggestMatches callback with array of matches
        	suggestMatches(formattedMatches)
        }
    })

Once the user selects a suggestion, you may want access the original (unformatted) match object with the onSelect callback. If so, put the formatting logic in the formatMatches option, like so:

	//...
	autocomplete({
    	//...
        onInput: (query, suggestMatches) => {
            const term = query.toLowerCase();
            const unformattedMatches = countries.filter(country => {
                return ~country.toLowerCase().indexOf(term)
            })
            //call suggestMatches callback with array of (unformatted) matches 
        	displayMatches(unformattedMatches)
        },
        formatMatch: (unformattedMatch) => unformattedMatch.name,
        onSelect: (selectedMatch) => {
        	//Here you can do stuff with the unformatted selectedMatch object
        },
        //...
    })

Default behavior

When the user types in the input field, a results panel containing autocomplete suggestions is generated underneath. Besides clicking, the user has the option of using the arrow and Enter keys to navigate the panel and select a suggestion. When a suggestion is selected, the input field is filled with the text of the suggestion.

Options

You can pass the following options to autocomplete()

CSS

The autocomplete.css import provides very minimal styling to position the results panel, highlight the active suggestion, etc. To add your own styling (which you will definitely want to do!), import a CSS file after this autocomplete.css.

Selectors

License

Autocomplete Select is released under the MIT License.