Flexdatalist is (another) jQuery autocomplete plugin with support for <datalist>.

On submit send selected country's continent...

16 KB minified — 5.12 KB gzipped


The yellow highlight is only present on this demo's stylesheet.


Using data from <datalist> as a suggestion (the standard behavior).


Multiple options from <datalist> (Use comma to set and separate values)


Force the selection of an option from <datalist>


Multiple options from <datalist> (selection required)


Data from remote file

Load data from file countries.json.

Like with <datalist> behavior, show the results as a suggestion.
Please note in the HTML that in order to search for value(s) property(ies) in a JSON, we set the option searchIn to name that matches the property for country name in JSON.


... with multiple values:


Now with the option selectionRequired to true:


Let's add some visibleProperties to results.
Since we are searching for country's name, 'name' is automatically an visibleProperties, but to add more, we simply set visibleProperties with ["name","capital","continent"].


But if we want to search the country name, but send its id on form submit? That's what valueProperty is for.


Let's continue to send the selected id but changing textProperty to {capital}, {name}, {continent}.


... with multiple values:


And if we want to pre-select a country by is id...


... or select multiple countries by setting multiple id's:


Or send all selected country's properties... just by setting valueProperty to *.


Multiple values.


Limit the number of values

Just set limitOfValues to a value greater than 0.


Search by word

Set searchByWord to true to enable it. It will break the keyword into individual words and search them independently.

e.g: Write papua guinea


Toggle value(s) on click/tap

Just set toggleSelected to true and on click/tap, it will toggle the value.


Show all results on focus

Just set minLength to 0 and on focus, it will show all results.


Field Relatives

The option relatives allows you to send to remote server the values of relative inputs. This is useful when you need to filter the results on the server depending on other input(s) value(s).

In the example below, for each remote search, will send the relatives values so that you can, for example, filter results according to input#relative (previous input) current value.


Chained Relatives

The option chainedRelatives disables the input until relative inputs are filled.

In the example below, with chainedRelatives set to true, if the input below is disabled, is because it's waiting for input#chained_relative (previous input) to get selected.


... input is disabled? Is just waiting for input#chained_relative2 (previous input) to get selected.


How to install

Download the plugin's latest version from Github repository.

Include the CSS file jquery.flexdatalist.min.css

<link href="/path/to/jquery.flexdatalist.min.css" rel="stylesheet" type="text/css">

Include the JS file jquery.flexdatalist.min.js

<script src="/path/to/jquery.flexdatalist.min.js"></script>

By default the plugin selects all input.flexdatalist's:

<input type="text" class="flexdatalist" >

... but you can use any selector:

<input type="text" class="my-input" >


Plugin configuration options

NOTE If you like, you can reset the options after initialization. Example: $('.my-input').flexdatalist('url', '/path/to/mydata');

Option Type Default Description
data string|array null Data source. Array of objects or a URL to JSON string/file.

NOTE If using a URL, it will load the data once.

url string null URL to remote data source. This is useful when data is just too big to pass to data option. The POST request will send parameters:
  • keyword: The current input keyword
  • contain: The searchContain option value
NOTE It will keep requesting the server for data whenever is appropriate. If possible, filter also on the server side to improve performance. NOTE If data is also set, it will merge the remote data with current loaded data set in data.
params object {} Additional parameters on AJAX requests.
multiple boolean false Accept multiple values
searchContain boolean false By default, Flexdatalist's search matches starting at the beginning of a word. Setting this option to true allows matches starting from anywhere within a word. This is especially useful for options that include a lot of special characters or phrases in ()s and []s.
searchDisabled boolean false Disable search of keyword in data.
searchByWord boolean false If set to true, it will split the keyword's words and search for them individually.
minLength integer 2 Search if there are n or greater characters.

If set to 0 it will show all results on input focus.

NOTE If set to 0 we recommend using maxShownResults to improve performance.

maxShownResults integer 100 Maximum number of results to show.
groupBy string null Group results by given property's name value.
selectionRequired boolean false Selection from search results is required.
focusFirstResult boolean false Focus first result.
searchIn string|array ["label"] Name of property (or properties) where it will search.
visibleProperties array []

Name of properties values that will appear with the search result.

Each property value will be wrapped with a <span class="item item-the_property_name">Property Value</span> so that its possible to style the appearance of additional information in the results.

textProperty string null

The text that will be visible to the user.

You can use {property_name} to be replaced with property value.

valueProperty string|object/array null

The property name that when selected its value will be sent with the form.

If you wanna send properties from selected item, set this option to *

normalizeString function null

This allows you to normalize the strings being compared before comparison.

Useful when using tools like latinize.


    normalizeString: function (string) {
        return latinize(string);

relatives string|jQuery instance null

Input relatives. Accepts field(s) selector(s) or an jQuery instance of the fields.

The relatives values will be sent with each request to remote server.


    relatives: '#user_full_name'

chainedRelatives boolean false

If set to true the flexdatalist field will be disabled until all the relatives are filled.

toggleSelected boolean false

If set to true, in multiple values allows you to toggle the presence of the value.

noResultsText string No results found for "{keyword}"

Text that will show when no results are found. If empty string, it won't show message.

requestType string post

To prevent compatibility problems, this option allows you to set the type of AJAX request you need/want.

NOTE This was a bad choice of mine (sorry) from the start. This option, on a future major release, will be defaulted to get.

allowDuplicateValues boolean false

As the name suggests, it allows multiple options with the same value.

limitOfValues integer 0

Limit the number of values in a multiple input.

NOTE If you like, you can reset the options after initialization. Example: $('.my-input').flexdatalist('url', '/path/to/mydata');


Plugin methods

Method Description
$('input').flexdatalist('destroy') Destroy flexdatalist instance.
$('input').flexdatalist('reset') Reset flexdatalist instance.


Name Parameters Description
  1. Event instance
  2. Input value
  3. Input text
  4. Options
Triggered every time the value in input changes.
  1. Event instance
  2. Selected item object
  3. Options
Triggered every time the user selects an option from results.
  1. Event instance
Triggered before loading all data.
  1. Event instance
  2. Data
Triggered after loading all data.
  1. Event instance
  2. Keyword(s)
  3. Data
Triggered before search (before loading all necessary data).
  1. Event instance
  2. Keyword(s)
  3. Data
  4. Matched items
Triggered after search (before showing results).
  1. Event instance
  2. Result(s)
Triggered before showing the results.
  1. Event instance
  2. Result(s)
Triggered after showing the results.


After searching and not finding a standalone, lite (not dependent on jQueryUI), autocomplete that did everything I needed for a project, I created Flexdatalist.

Along with many other cool features, Flexdatalist allows you to style the list of suggested data/values, which is not possible at the moment with browser's native <datalist>.

Hope it's useful to you as it is to me. Enjoy ;)

Copyright © 2016