HTML5 Logo

I decided to use the HTML5  <input> <datalist> on a View in my CakePHP project, and was super-surprised to see that there is no way of restricting the text in the <input> to the values in the <datalist>.

I have a basic edit form in the database application I am working on. I wanted a quick win whereby a user could edit the model of an item, the provisor being that the Model name must be from a finite list of values which don’t actually exist in the database – they are created by combining the manufacturer and model name of the item when the item is created. I wanted some kind of search / intelli-sense to help the user select a model, so HTML5’s <datalist> seemed perfect. The problem is I needed to restrict the model to a finite list.

So I understand the function of the <input> control is to input text, but considering the idea behind the control is to be able to have a kind of type-ahead, auto-suggest feature for the control hitherto only possible using AJAX, it seems like a real shame they did not add an attribute to the input control to restrict the values to the values in the <datalist>.

Browser support is sketchy at this stage

http://demo.agektmr.com/datalist/

http://stackoverflow.com/a/21836157/4779449

This is my jQuery solution

See the Pen HTML5validation by David Fox (@foxbeefly) on CodePen.0

HTML5

jQuery

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.