gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 16:00:35 25 4
gpt4 key购买 nike

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

最佳答案

希望以下示例对您有所帮助。 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" />

关于javascript - 如何使用从 API 调用返回的 JSON 数据使 jquery 自动建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37827418/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com