Autocomplete 1.0

Changelog

An accessible autocomplete component, implemented according to the ARIA 1.1 combobox specification.

Autocomplete components can be initialised via autocomplete.init($el);, where $el is a selector or an HTMLElement that either is or within an autocomplete wrapper element. If no argument is passed, the default selector '.js-autocomplete' will be used.

When a user enters text into the autocomplete's input, so long as the value of the input reaches a minimum length (configured to 3 by default), after a 500 ms delay a query will be sent to the server based on a URL specified in the data-autocomplete-source attribute on the main autocomplete element.

When results are returned, they will be used to build the results via a templayed template. This template can be specified via id using a data-autocomplete-template-id attribute on the main autocomplete element, or by placing a script template with class js-autocomplete__template inside the autocomplete element.

Though the data returned by the server can vary, each item needs to have at least a value and an id. If these change, the corresponding keys used in the template will also need to be updated.

All the ajax handling code is in the _doQuery method. If a local autocomplete is needed, this method alone could be changed to run the filtering on the front end.