Flexdatalist – Autocomplete Plugin with <datalist> Support

The HTML5 datalist element is utterly useful in complicated frontend development. Yet, it’s one of those elements that not many developers know about.

It works on an submit margin where we can autosuggest certain values for a input. The default setup looks fine and we’ve lonesome some coding tips on building cold effects with autosuggest datalists.

However, it’s most easier to work with a plugin such as Flexdatalist. It supports a wider array of browsers and allows we to fully customize a pattern of your datalist.

Flexdatalist jQuery pluginFlexdatalist jQuery plugin

Not everybody has a need for autocomplete facilities and with local HTML5 datalists, we competence not worry with a plugin. However, Flexdatalist is maybe a best one out there since it builds on local datalist behaviors to add:

  • Mobile manageable support
  • Extra descriptions for any item
  • Options for mixed selections during once
  • Custom eventuality handlers

It’s all powered by jQuery, so we will need a duplicate of a latest version to get this running. It also comes with a possess CSS stylesheet that we competence wish to mix into a singular CSS record to revoke HTTP requests.

You can find full setup instructions on a main demo page that includes download links to a Flexdatalist files.

It’s unequivocally elementary to set up, with just a singular line of JavaScript. By default, a plugin targets all inputs with a category .flexdatalist, so only adding that to your formula should be adequate to see results.

You only supplement a datalist component inside your submit margin and Flexdatalist handles a rest. It’ll auto-style a list, including discretionary detailed text.

The simplest approach to supplement additional content is through a JSON file that we can attach to your submit by a information attribute.

For example, if we check out a Flexdatalist demo page you’ll find a “Countries” submit margin with a charge data-data='countries.json'. This references a remote record that stores all a tender submit information externally.

Flexdatalist instance demoFlexdatalist instance demo

Too many of these fields we can slow down a page a bit. However, we can’t suppose many sites would run some-more than a few of these datalist forms on one page, not to discuss even with this jQuery plugin, they’re still flattering fast.

To get started, only visit a GitHub repo and download a copy. This includes a link to a categorical demo page that also has full support for setup, JavaScript options, and copiousness of representation formula snippets to go around.

Add Comment