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 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.

This is my jQuery solution on Codepen:

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

By foxbeefly

PHP / MySQL Developer. HTML, CSS and some JavaScript.

Leave a Reply

Your email address will not be published. Required fields are marked *

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