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
Browser support is sketchy at this stage.
This is my jQuery solution on Codepen: