如何使用API​​调用返回的JSON数据进行jquery自动建议

Question

我想在文本输入框中输入3个字符时创建一个自动提示功能。应该从API调用的JSON数据结果中填充建议列表。

我的输入文本框代码如下：

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

这是我的API网址：

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

以API调用以JSON数据的形式完成后给出结果。在URL 190 是基于该结果的列车编号，显示所有从190开始编号的列车**。

下面是JSON结果：

{
"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 }

我想将上述结果用作建议清单。我试图使用Jquery自动建议API代码，但无法正确配置它。

请提供完整的代码，包括所需的所有库。任何帮助都是高度请求的。

我的代码是：

<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 1

希望以下示例能为您提供帮助。 ajax网址对我不起作用，所以有一些工作。

Use this fiddle working sampl

HTML

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

JS

＆＃13;

＆＃13;

$(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]);
        });
    }
  });
});

＆＃13;

body {
  padding: 10px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

要从以下示例数据中提取列名，以下代码应该有所帮助。

var test_str = "1906122 (prakasEXPRES)";
var start_pos = test_str.indexOf('(') + 1;
var end_pos = test_str.indexOf(')',start_pos);
var text_to_get = test_str.substring(start_pos,end_pos)
document.getElementById("demo").innerHTML = text_to_get ;