Menu
I know there are a lot of JavaScript solutions, but is there an HTML5 method of having a text input with autocomplete? The datalist element is almost what I'm after, except it allows you to enter custom values rather than limiting you to what's in the list.
958
When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values. Note: The autocomplete attribute works with the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.
The HTML autocomplete attribute. If an input element has no autocomplete attribute, then browsers use the autocomplete attribute of the element's form owner, which is either the <form> element that the <input> element is a descendant of, or the <form> whose id is specified by the form attribute of the <input> element. For more...
See the autocomplete attribute and login fields. The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement. The field expects the value to be a person's full name.
If the autocomplete feature is on, the browser will automatically show values, based on what users entered before in the field. If the autocomplete feature is off, the browser won’t automatically show values, based on what users entered before in the field.
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
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
