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

Posted 2023-03-05

【中文标题】如何使用从 API 调用返回的 JSON 数据使 jquery 自动建议

【英文标题】：How to make jquery auto suggest with JSON data returned from API call

【发布时间】：2016-10-16 02:17:20

【问题描述】：

我想在文本输入框中输入 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>

【问题讨论】：

请显示一些代码以尝试使自动建议起作用，我们将能够提供建议。

另外请分享错误。很可能是jsonp的问题

【参考方案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" />

【讨论】：

感谢@Prakash！在稍作调整后，您的现场小提琴对我有用......只是想知道如何将这两个值与这个 JSON 结果分开。 "19061 (RAMNAGAR EXPRES)", "19062 (RMR BDTS EXP)",

给出另一个答案，因为评论不允许我格式化 SRC

亲爱的@Prakash，如何在上面的代码中突出显示 request.term

【参考方案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 ;