<datalist> element is quite useful in modern frontend development. Yet, it’s one of those elements that not many developers know about.
It works on an input field where you can autosuggest certain values for the input. The default setup looks okay and we’ve covered some coding tips on building cool effects with autosuggest datalists.
However, it’s much easier to work with a plugin such as Flexdatalist. It supports a wider array of browsers and allows you to fully customize the design of your datalist.
Not everyone has a need for autocomplete features and with native HTML5 datalists, you might not bother with a plugin. However, Flexdatalist is perhaps the best one out there because it builds upon native datalist behaviors to add:
- Mobile responsive support
- Extra descriptions for each item
- Options for multiple selections at once
- Custom event handlers
It’s all powered by jQuery, so you will need a copy of the latest version to get this running. It also comes with its own CSS stylesheet which you might want to combine into a single CSS file to reduce HTTP requests.
You can find full setup instructions on the main demo page which includes download links to the Flexdatalist files.
.flexdatalist, so just adding that to your code should be enough to see results.
You just add the
<datalist> element inside your input field and Flexdatalist handles the rest. It’ll auto-style the list, including optional descriptive text.
The simplest way to add extra text is through a JSON file which you can attach to your input through a data attribute.
For example, if you check out the Flexdatalist demo page you’ll find a “Countries” input field with the attribute
data-data='countries.json'. This references a remote file that stores all the raw input data externally.
Too many of these fields you can slow down the page a bit. However, I can’t imagine many sites would run more than a few of these datalist forms on one page, not to mention even with this jQuery plugin, they’re still pretty fast.