The AutoComplete box, reinvented for the Modern Web
A versatile, accessible autocompletion Web Component that works everywhere and has zero dependencies.
When you come to think about it, autocompletion in textboxes has become a sort of commodity, and numerous UI frameworks host their own implementation.
When we’re building Modern Web Apps without making use of a big framework nor an existing Design System that includes an autocompletion UI component, we’re on our own.
Until now.
I’ve written an AutoComplete ECMAScript class, and a standards-based Web Component, <omni-box>, that implements it.
OmniBox
The AutoComplete class hosts all the underlying logic, and could be used to attach autocompletion logic to any text-based HTML input element.
The OmniBox Web Component generates a search input and attaches the AutoComplete component to it.
Why OmniBox?
This is an extremely versatile autocompletion component with zero dependencies, that runs in every browser, and is implemented as a Web Component. The name OmniBox refers to the fact that, with this component, you can facilitate simple autocompletion scenarios, but you can also implement complex multi-source systems like the ones that LinkedIn, Facebook or Office.com have.
Your autocompletion results can come from fixed (Array) data, but you can also work with much more complex situations, where multiple sources such as REST Apis need to be called and the results of multiple calls need to be aggregated.
Also, it can be configured to call custom actions on selection of an autocomplete result item, instead of just filling the attached input.
Features
- Standards-based Web Component.
- Zero dependencies.
- Configurable autocompletion categories, where the autocompletion results are aggregated as you type.
- Each category has a ‘getItems’ property that can return an Array, a Function or a Promise.
- Each category has a sortindex.
- Each category can have a trigger function that determines when its ‘getItems’ is called.
- Each category can have custom actions defined for item selection.
CodePen
Explore the component on CodePen:
More Standards Based Goodies
See also The TabStrip, reinvented for the Modern Web | by Marc van Neerven | CTO-as-a-Service | Medium
PurePWA
I’m also the author of PurePWA — A Radical U-Turn in Web Development, where I explore what’s possible when building modern PWAs with Semantic HTML and ECMAScript, but without frameworks, build systems, or any other dependencies.
