As I have written in this post I’m slowly getting into Aurelia Web UI framework. Recently I needed an autocomplete component. My requirements were:
- get suggestions from server via REST API (JSON payload)
- simple, yet flexible (value can be calculated from received suggestions)
- flexible ways to display suggestions (ideally provide a template to display suggestions values)
- suggest values as one types matching starting letters (case insensitive and diacritics insensitive)
- cache server responses for efficiency
- can use both mouse and keys (arrows + enter) to select suggestion
I’m sure that existing autocomplete components like typeahead or JQuery UI Autocomplete would serve my purpose quite well. It’s fairly easy to integrate existing components from other frameworks into Aurelia (see this post for instance). But I decided to create my own, using only Aurelia (and a bit of JQuery – but it can be easily rewritten in pure DOM API – JQuery is used just for convenience, because it’s anyhow used in Aurelia skeleton app). I though it would be nice learning exercise (and it really was) and also we programmers (especially leisure programmers like myself) do like to reinvent the wheel, right? (But it’s not always bad idea – image world when only one type of wheel exists – by recreating existing solutions, improving them, changing them we can also achieve progress – Web UI frameworks themselves are good example of such progress). I’d like to share my experiences further in this article. Continue reading Next Adventure in Aurelia – Autocomplete Component