plete: 2KB autocomplete with zero dependencies
For a project at work, we needed an autocomplete component, that meets the following criteria:
- zero dependencies
- decent WAI-ARIA / accessibility support
- reasonable license
- good test coverage
- remote filtering
- custom rendering of options
- separation of presentation from the value selected
I am a firm believer in open web standards. Whenever feasible, I prefer to apply lean web principles and leverage the full feature set of the web platform.
While there is a <datalist> element in the HTML Living Standard spec, it is not up to par for the requirements listed above.
The first four requirements are easily met by <datalist>, as it’s native to the platform. However, the last three requirements cannot be met by <datalist>, so it is not relevant for my application.
Lea Verou came to similar conclusions, and created Awesomeplete, which has been a great inspiration.
The remote filtering requirement is unavoidable. For our project, the autocomplete component will have to filter multiple datasets, each having more than 30,000 entries. These datasets are expected to grow. There simply is no responsible way to send that much data to the client to be used in a <datalist> element.
I spent some time surveying the autocomplete component landscape as of late 2019, hoping to find a suitable component. None was found.
For a few days, I considered contributing async/remote filtering to Awesomeplete, but thought it would be too invasive. I also considered contributing accessiblity improvements and test coverage to other candidates, but decided against it.
Like Lea, I eventually came to the conclusion that the best path forwards, would be write my own autocomplete component.
I give you plete, “a vanilla js autocomplete component that supports remote filtering.”
Documentation at https://plete.dev.