HTML5 banner image.

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 that 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 <input> seemed perfect. The problem was I needed to restrict the models to a finite list.

So I understand the function of the <input> control is to allow the user 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 <datalist> validation by David Fox (@foxbeefly) on CodePen.


Resources:

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.