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/IntelliSense 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:
- Kitamura, E. (2022). datalist experiment. Retrieved 20 December 2022, from https://demo.agektmr.com/datalist/
- Datalist-Option, H. (2011). HTML Form: Select-Option vs Datalist-Option. Retrieved 20 December 2022, from https://stackoverflow.com/questions/6865943/html-form-select-option-vs-datalist-option/21836157#21836157