capital-framework icon indicating copy to clipboard operation
capital-framework copied to clipboard

[cf-forms] Use datalist element with select element fallback

Open KimberlyMunoz opened this issue 10 years ago • 1 comments

From @cfarm in https://github.com/cfpb/cf-forms/issues/34

We can implement this technique to make more useful, usable inputs for things like States.

The datalist element is an HTML5 form element that auto-suggests results from the list based on the user's typed input. So if you start typing "P" in a State datalist you'll get Pennsylvania and other suggestions in the field.

For browsers that don't support this element, we can include a <select> element inside it as a fallback, which is the same as it works now. More on this technique: https://adactio.com/journal/4272

KimberlyMunoz avatar Nov 04 '15 22:11 KimberlyMunoz

Support isn't great http://caniuse.com/datalist/embed/

anselmbradford avatar Jul 27 '17 17:07 anselmbradford