javascript - 如何使用从 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 url 对我不起作用，所以有一些工作。

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" />