Everything you need to create fantastic autocomplete experiences.
We've built Autocomplete to give you unlimited flexibility while freeing you from having to think about things like keyboard navigation, accessibility, or UI state. The library offers a wide variety of APIs to let you fully customize the behavior and rendering of your autocomplete.
Yet, only two parameters are required to create an autocomplete:
- The container you want your autocomplete to go in.
- The sources from which to get the items to display (see more in Sources).
container options refers to where to inject the autocomplete in your HTML. It can be a CSS selector or an Element. Make sure to provide a container (e.g., a
div), not an
input. Autocomplete generates a fully accessible search box for you.
This is all you need to build a fully functional, accessible, keyboard-navigable autocomplete.
Now, this is a great start, but you can go much further. Here are some of the options you'll probably want to use next:
placeholderto define the text that appears in the input before the user types anything.
autoFocusto focus on the search box on page load, and
openOnFocusto display items as soon as a user selects the autocomplete, even without typing.
- Use the
onStateChangelifecycle hook to execute code whenever the state changes.
debug: trueto keep the autocomplete panel open even when the blur event occurs (see Debugging).
For a full list of all available parameters, check out the API reference.