Ravindra Gupta Ravindra Gupta - 5 months ago 19
JSON Question

How to make jquery auto suggest with JSON data returned from API call

I want to make a autosuggest function while entering 3 char in text input box. the suggestion list should be populated from JSON data result from API call.

my input textbox code is below:

<div><input id="trnnumname"></input></div>


This is my API url:

http://api.railwayapi.com/suggest_train/trains/190/apikey/1234567892/


which give result after API call completes in the form of JSON data. In URL 190 is train number based on that result comes which show all the trains who has number starting from 190**.

below is JSON result:

{
"response_code": 200,
"train": [
"19005 (SAURASHTRA MAIL)",
"19006 (SAURASHTRA MAIL)",
"19011 (GUJARAT EXPRESS)",
"19012 (GUJARAT EXPRESS)",
"19017 (SAU JANATA EXP)",
"19018 (SAU JANATA EXP)",
"19019 (DEHRADUN EXP)",
"19020 (DEHRADUN EXP)",
"19021 (BDTS LJN EXPRES)",
"19022 (LJN BDTS EXP)",
"19023 (FZR JANATA EXP)",
"19024 (FZR BCT JANTA)",
"19027 (VIVEK EXPRESS)",
"19028 (VIVEK EXPRESS)",
"19029 (BDTS DEE EXPRES)",
"19030 (DEE BDTS EXP)",
"19031 (HARIDWAR MAIL)",
"19032 (YOGA EXPRESS)",
"19033 (GUJARAT QUEEN)",
"19034 (GUJARAT QUEEN)",
"19037 (AVADH EXPRESS)",
"19038 (AVADH EXPRESS)",
"19039 (AVADH EXPRESS)",
"19040 (AVADH EXPRESS)",
"19045 (TAPTI GANGA EXP)",
"19046 (TAPTI GANGA EXP)",
"19047 (ST BHAGALPUR EX)",
"19048 (BGP SURAT EXP)",
"19049 (BDTS PATNA EXP)",
"19050 (PNBE BDTS EXP)",
"19051 (SHRAMIK EXPRESS)",
"19052 (BL SHRAMIK EXP)",
"19053 (ST MFP EXPRESS)",
"19054 (MFP ST EXPRESS)",
"19055 (BL JODHPUR EXP)",
"19056 (JU BL EXPRESS)",
"19057 (UDN VARANASI EX)",
"19058 (BSB UDN EXP)",
"19059 (JAMNAGAR INTCIT)",
"19060 (SURAT INTERCITY)",
"19061 (RAMNAGAR EXPRES)",
"19062 (RMR BDTS EXP)",
"19063 (DANAPUR EXPRESS)",
"19064 (DNR UDHNA EXP)",
"19065 (BDTS BGKT EXP)",
"19066 (BGKT BDTS EXP)"
],
"total": 46 }


I want to use the above result as suggestion list. i tried to use Jquery auto-suggestion API code but not able to configured it properly.

Pls give full code including all libraries required. Any help is highly solicited.

my code is:

<script>$(function(){ $.getJSON('http://allorigins.pw/get?url=' + encodeURIComponent('http://api.railwayapi.com/suggest_train/trains/' + $('#trnnumname').value() + '/apikey/12345678/') + '&callback=?', function(data){varjdata = JSON.parse(data.contents);alert("1");varjdata1 = varjdata.train;});$("#trnnumname").autocomplete({source: varjdata1,minLength: 3,delay: 500});});</script>

Answer

Hope the following sample will help you. The ajax url did not work for me so have some working one.

Use this fiddle working sampl

HTML

<input type="text" placeholder="type something ..." id="suggest" />

JS

$(document).ready(function() {

  $("#suggest").autocomplete({
    delay: 20,
    source: function(request, response) {
      // Suggest URL
      //http://api.railwayapi.com/suggest_train/trains/190/apikey/1234567892/
      // The above url did not work for me so using some existing one
      var suggestURL = "http://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY";
      suggestURL = suggestURL.replace('%QUERY', request.term);

      // JSONP Request
      $.ajax({
          method: 'GET',
          dataType: 'jsonp',
          jsonpCallback: 'jsonCallback',
          url: suggestURL
        })
        .success(function(data) {
          response(data[1]);
        });
    }
  });
});
body {
  padding: 10px;
}
<input type="text" placeholder="type something ..." id="suggest" />

Comments