@springernature/global-autocomplete

Autocomplete component

Basic autocomplete function that listens to key events on a text input and fetches suggestions from a specified endpoint.

Example usage

JS

import autoComplete from 'global-autocomplete';

const onResults = data => {
    // Update UI with results returned from server, e.g.

    const resultsContainer = document.createElement('div');
    resultsContainer.className = 'c-results-container';

    data.forEach(datum => {
        const result = document.createElement('div');
        result.textContent = datum;
        result.tabIndex = "0";  // So you can focus/tab through the results
        result.className = 'c-results-container__result';
        resultsContainer.appendChild(result);
    });
    document.querySelector('[data-component-autocomplete]').insertAdjacentElement('afterend', resultsContainer);
};

const onSelect = result => {
    // Update UI with selected result
}

const onError = error => {
    // Update UI with error state
    // Optionally call myAutoComplete.disable();
}

const args = {
    selector: '[data-component-autocomplete]',
    onSelect: onSelect,             // OPTIONAL
    searchError: onError,           // OPTIONAL
    endpoint: 'autocomplete?q=',    // OPTIONAL: Provide an endpoint if you want the component to request data
    staticResultsData:                           // OPTIONAL: Provide JSON if you want to fetch data and transform it yourself. If both endpoint and data are supplied, data will be used.
    timeout: 2000,                  // OPTIONAL: Set a timeout for the fetch request, onError will be called if fetch request timeouts, default is 2000.
    minCars: 1,                     // OPTIONAL: Minimum characters to be typed before request is sent, default is 0.
    inputDelay: 300,                // OPTIONAL: Delay between keypress and request being sent, default is 300.
    headers: {                      // OPTIONAL
      Accept: 'application/json; version=2'
    },
    resultsContainerSelector: '.c-results-container',
    resultSelector: '.c-results-container__result',
    resultsCallBack: onResults
};

const myAutoComplete = autoComplete(args);
myAutoComplete.enable();

HTML