Flexdatalist – Autocomplete Plugin with <datalist> Support

By Jake Rocheleau. in Toolkit. Updated on July 17, 2022.

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

It’s really simple to set up, with just a single line of JavaScript. By default, the plugin targets all inputs with the class .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.

To get started, just visit the GitHub repo and download a copy. This includes a link to the main demo page which also has full documentation for setup, JavaScript options, and plenty of sample code snippets to go around.