A drop-down box with a text search option is a fairly common interface element these days. An article I saw recently described how to make such a list using the Select2 Javascript library :
This is a UI element that helps your users. However, the Select2 library is a JavaScript library, which in turn depends on some CSS and JQuery libraries. This means three round trips are required to collect a bunch of files of different sizes:
JQuery - 101kb
Select2 JavaScript - 24kb
Select2 CSS - 3kb
This isn’t ideal for site speed, but in order to provide portugal mobile database users with a streamlined interface, we’re pretty sure it’s worth it.
However, using the HTML data list element this actually works out of the box:
This allows the user to search the list or freely type their own response, therefore providing the same functionality. Plus, it has a native interface on smartphones!
detail
LonelyPlanet has a beautiful website, and I’m looking at this page about Spain , which has a “Read More” link that most web users will be familiar with:
Like everything I see, they use a JavaScript library to do this, which again comes with a bunch of overhead.
However, HTML has a pair of built-in tags, called details and summary, designed to do exactly this. Free and native to HTML, with no overhead, it’s more accessible to people who need access to screen readers, while conveying semantics to Google.