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

Dynamic-Datalist-Plugin-jQuery-JSON
File Size:3.44 KB
Views Total:185
Last Update:December 24, 2017
Publish Date:December 24, 2017
Official Website:Go to website
License:MIT

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.
    $('.js-combobox').jsonToDatalist({
      callback: function() {}
    });

    Done 🙂