How MDN's Autocomplete Search Works

Re:How MDN's Autocomplete Search Works by mg on Tuesday August 03, 2021 @02:06PM (#28052197)

My favorite autocomplete library is an ancient version of bootstrap-typeahead.js by Twitter. A single file with less than 400 lines of Javascript. They don't make these anymore :)

I use it everywhere where I need autcompletion. For example on the Music-Map:

https://www.music-map.com

I made a fork of the code which is available here:

https://www.gibney.org/0g-typeahead

[ Parent | on HN ]

Re:How MDN's Autocomplete Search Works by peterbe on Tuesday August 03, 2021 @04:24PM (#28053692)

Getting accessibility right is hard. We very much care about that. One of the strong reasons for why we're using Downshift.

[ Parent | on HN ]

Re:How MDN's Autocomplete Search Works by ourcat on Tuesday August 03, 2021 @02:19PM (#28052327)

I did my first autocomplete search UI with that library.

These days, due to the rest of the project, I've been using Angular and Material's Autocomplete component, which I've found very easy to customise for in-memory indexes or hits to a remote ElasticSearch 'suggester' proxy endpoint.

[ Parent | on HN ]

Re:How MDN's Autocomplete Search Works by capableweb on Wednesday August 04, 2021 @03:59AM (#28058460)

It seems to be missing the most obvious feature: keyboard navigation. My guess is that accessibility is not well implemented either. Probably why other dropdown implementations are bigger code-size wise.

[ Parent | on HN ]

Re:How MDN's Autocomplete Search Works by mg on Wednesday August 04, 2021 @04:50AM (#28058738)

It has keyboard navigation. It is just not enabled on the Music-Map.

Gnoosic uses the same library, and here you can navigate with the cursor keys:

https://www.gnoosic.com/faves

[ Parent | on HN ]