Dynamic Datalist Plugin With jQuery And JSON - json-to-datalist

json-to-datalist is a small jQuery plugin used to create a dynamic datalist for the input field that contains a set of options representing the available values while typing.

How to use it:

1. Put jQuery JavaScript library and the jQuery json-to-datalist plugin's script at the bottom of the web page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-json-to-datalist.js"></script>

2. Prepare your option elements in a JSON file as this:

// fruits.json
[
  {
      "name": "Apple"
  },
  {
      "name": "Apricot"
  },
  {
      "name": "Banana"
  },
  {
      "name": "Blackberry"
  },
  {
      "name": "Blueberry"
  },
  {
      "name": "Cherry"
  },
  {
      "name": "Clementine"
  },
  {
      "name": "Grape"
  }
  ...
]

3. Initialize the plugin on your input field and specify the path to the JSON file.

<input type="text" name="fruits" id="fruits" class="js-combobox" list="fruits">

$('.js-combobox').jsonToDatalist({
  jsonPath: 'fruits.json'
});

4. You can also specify the JSON path directly in the input field using 'data-json-path' attribute:

<input type="text" name="fruits" id="fruits" class="js-combobox" list="fruits" data-json-path="fruits.json">

$('.js-combobox').jsonToDatalist();

5. The plugin also provides a callback function which can be used to integrate with other plugins.

$('.js-combobox').jsonToDatalist({
  callback: function() {}
});

---

This awesome jQuery plugin is developed by stevenMouret. For more Advanced Usages, please check the demo page or visit the official website.