You should try the datalist element. It’s clearly defined in W3C HTML5 Recommendation, probably the best option on the desk for now and near future.
The datalist element is hooked up to an input element using the list
attribute on the input element.Each option element that is a descendant of the datalist element, that
is not disabled, and whose value is a string that isn’t the empty
string, represents a suggestion. Each suggestion has a value and a
label.
Google chrome and chromium based browsers supports it since v21.x (As of Dec 2014, current version is 39, check compatibility status of other browsers here) Firefox and Opera also supports for a long time. Modern(!) IE versions partially supports datalist.
Demo: A great working datalist implementation by Eiji Kitamura.
Polyfill : Also check out the RelevantDropdown. It’s a HTML5 datalist polyfill that depends on jQuery and Modernizr.
Try to run this example:
<input type="search" list="languages" placeholder="Pick a programming language..">
<datalist id="languages">
<option value="PHP" />
<option value="C++" />
<option value="Java" />
<option value="Ruby" />
<option value="Python" />
<option value="Go" />
<option value="Perl" />
<option value="Erlang" />
</datalist>W3 reference: https://www.w3.org/TR/html5/forms.html#the-datalist-element