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

File Size:3.44 KB
Views Total:251
Last Update:December 24, 2017
Publish Date:December 24, 2017
Official Website:Go to website

This jQuery plugin will get data in a JSON file and create datalist after a input field.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 It Use : 

  1. Add js/css link :
    <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">
  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">
  5. The plugin also provides a callback function which can be used to integrate with other plugins.
      callback: function() {}

    Done 🙂