I run a timezone conversion
website that has text fields for selecting the locations that you want to convert times between. There's a list of hundreds of common cities for people to choose. I created the site over 5 years ago and made a "Show HN" out of it (this was before there was Product Hunt, and even before there was "Show HN". Back then we called it a "weekend project").
The location text fields use an autocomplete library I chose in the beginning and haven't updated since. These fields aren't working well in Android Chrome and I've been getting a steady stream of emails from users complaining simply that the site "didn't work". An aside, if only everyone knew that when you report a web problem please say your browser, OS, and then both expected and actual behavior.
I decided to do some research on the top Javascript autocomplete libraries. There's
tons so I tried to focus on the major ones. Here are my rough notes.
My top two criteria were that the library be:
- Actively maintained or generally popular
- Have desktop and mobile browser support
Select2 (active since 2012 / browser: all modern browsers)
Although mobile browser support isn't specifically mentioned in the docs, I tested this on iPhone and Android and found they work just fine. This one handles tags. It's got a long history (up to version 4 and started in 2012).
Because of these positives I went ahead and tried using it within my site. I quickly learned two things. First, it's difficult to customize the styling. Although it doesn't list Bootstrap as a dependency, you realistically need to include it to get things to look right. And then figuring out which classes you need to override to further tweak the appearance is not easy.
The second is questionably performance. All of the examples on their site use the 50 US States, but I tried throwing 1500 options at it and although things seemed ok on my 5 year old laptop and iPhone, a weaker Android tablet took 1-2 seconds between a tap on the control and displaying the dropdown.
Selectize.js (active since 2012 / browsers: ?)
Selectize has a large number of forks on GitHub. It has touch (mobile browser) support and goes back to IE8 with a shim. It was developed by Brian Reavis. It's pretty full feature with a specialization in tags (the blue rounded rectangles frequently found in autocomplete fields). It goes back to 2012 and has been actively maintained since.
Typeahead.js (last active April 2015 / mobile browsers untested)
It ranks highly in Google searches, so that must mean something. The demo on their homepage is impressive. It's got a nice UI, handles boundary cases well like typing meta keys during a search, and originally came from Twitter. All good signs. The bad news. Releases seem to have slowed down with the most recent being April 2015, before hitting 1.0. It's not tested in mobile browsers, although worked in my casual Mobile Safari test.
Written by Tomas Kirda this is different than the autocomplete widget that is included in jQuery UI. It has lots of initialization options. The most recent commit was November 2015.
jQuery UI Autocomplete Widget (active maintenance / browser: only desktop)
This is the official widget included with jQuery UI (jQuery UI is a curated set of UI widgets built on top of plain old jQuery). It's autocomplete functionality is pretty basic. The library is actively maintained but it's browser support only seems to imply desktop browsers and not mobile.
Chosen (active / browser: explicitly no mobile)
This one seemed great until the lack of mobile browser support.
Inactive libraries I didn't spend much time looking at:
Tag-it,
Completely
