CODEWITHSUNDEEP
javascriptphpjqueryarrays
Sandeep Kumar
Sandeep Kumar

Reputation: 158

How to search data from json in input field

I have a url of a json file . In search input field when will type any pincode, then pin code suggestion should be show.

Here is my url ,

https://data.gov.in/api/datastore/resource.json?resource_id=6176ee09-3d56-4a3b-8115-21841576b2f6&api-key=.

Please suggest me the steps or idea about this.

and, Thanks in advance.

Upvotes: 0

Views: 699

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

You may use the autocomplete:

$(function () {
  $("#tags").autocomplete({
    source: function (request, response) {
      $.ajax({
        url: "https://data.gov.in/api/datastore/resource.json?resource_id=6176ee09-3d56-4a3b-8115-21841576b2f6&api-key=<app key>",
        dataType: "json",
        success: function (data) {
          response($.map(data.records, function (item) {
            if (item.pincode.indexOf($("#tags").val()) == 0)
              return {
                label: item.pincode, // built the label like you want
                value: item.pincode
              };
          }));
        }
      });
    }
  });
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="ui-widget">
    <label for="tags">Iincode: </label>
    <input id="tags">
</div>

Upvotes: 1

Related Questions