带有 JSON 数组字符串的 Jquery 自动完成扩展器
Posted
技术标签:
【中文标题】带有 JSON 数组字符串的 Jquery 自动完成扩展器【英文标题】：Jquery AutoComplete Extender with JSON Array String 【发布时间】：2017-05-13 18:04:40 【问题描述】：<script>
$(function ()
var myArray = '["OriginId":2609,"OriginName":"14th Mile Stone","OriginId":2007,"OriginName":"Aachara","OriginId":2220,"OriginName":"Aarni","OriginId":2216,"OriginName":"Aasind","OriginId":637,"OriginName":"Aathankarai","OriginId":1292,"OriginName":"Aatthur","OriginId":1144,"OriginName":"Aavanam","OriginId":2909,"OriginName":"Abad (Airport)","OriginId":379,"OriginName":"Abiramam","OriginId":4556,"OriginName":"ABLOLI","OriginId":4554,"OriginName":"ABLOLI KALE HOUSE","OriginId":2346,"OriginName":"Abohar","OriginId":2500,"OriginName":"Abu Road","OriginId":4395,"OriginName":"ACHALPUR","OriginId":1594,"OriginName":"Achanta","OriginId":2769,"OriginName":"Adda Road"]';
var jsonString = JSON.parse(myArray);
$('#busPoint').autocomplete(
source: function (request, response)
$.getJSON(jsonString, function (data)
console.log(data)
response($.map(data.list, function (value, key)
return
label: value,
value: key
;
));
);
,
minLength: 2,
delay: 100
);
);
</script><!doctype html>
<html lang="en">
<head>
<title>jQuery UI Autocomplete</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="ui-widget">
<hr />
<input type="text" id="busPoint">
</div>
</body>
</html>我的 HTML 代码
<div class="ui-widget">
<hr />
<input type="text" id="busPoint">
</div>
我的 javascript 代码
<script>
$(function ()
var myArray = '["OriginId":2609,"OriginName":"14th Mile Stone","OriginId":2007,"OriginName":"Aachara","OriginId":2220,"OriginName":"Aarni","OriginId":2216,"OriginName":"Aasind","OriginId":637,"OriginName":"Aathankarai","OriginId":1292,"OriginName":"Aatthur","OriginId":1144,"OriginName":"Aavanam","OriginId":2909,"OriginName":"Abad (Airport)","OriginId":379,"OriginName":"Abiramam","OriginId":4556,"OriginName":"ABLOLI","OriginId":4554,"OriginName":"ABLOLI KALE HOUSE","OriginId":2346,"OriginName":"Abohar","OriginId":2500,"OriginName":"Abu Road","OriginId":4395,"OriginName":"ACHALPUR","OriginId":1594,"OriginName":"Achanta","OriginId":2769,"OriginName":"Adda Road"]';
var jsonString = JSON.parse(myArray);
$('#busPoint').autocomplete(
source: function (request, response)
$.getJSON(jsonString, function (data)
response($.map(data, function (value, key)
return
label: value,
value: key
;
));
);
,
minLength: 2,
delay: 100
);
);
</script>
我已经尝试过这段代码，但它不起作用。 我需要在 select 上提取 originid 和 name。 大多数示例包含与外部 json 或 webservice pull 的连接，但我的数据在同一页面上。 如果他们还有其他我可以使用的，请告诉我
【问题讨论】：
能不能创建jsfiddle来调试 添加请检查 【参考方案1】：您的脚本标签没有任何结束标签。此外，我已经在本地测试了您的代码并发现，此行之后的代码：$.getJSON(jsonString, function (data) 没有执行。在谷歌搜索之后，我发现 $.getJSON 用于从服务器端获取数据，但在您的代码中这不是必需的，因为您将数据保存在本地变量中。
您的解决方案可能是这样的：
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Autocomplete</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function()
var myArray = '["OriginId":2609,"OriginName":"14th Mile Stone","OriginId":2007,"OriginName":"Aachara","OriginId":2220,"OriginName":"Aarni","OriginId":2216,"OriginName":"Aasind","OriginId":637,"OriginName":"Aathankarai","OriginId":1292,"OriginName":"Aatthur","OriginId":1144,"OriginName":"Aavanam","OriginId":2909,"OriginName":"Abad (Airport)","OriginId":379,"OriginName":"Abiramam","OriginId":4556,"OriginName":"ABLOLI","OriginId":4554,"OriginName":"ABLOLI KALE HOUSE","OriginId":2346,"OriginName":"Abohar","OriginId":2500,"OriginName":"Abu Road","OriginId":4395,"OriginName":"ACHALPUR","OriginId":1594,"OriginName":"Achanta","OriginId":2769,"OriginName":"Adda Road"]';
var jsonString = JSON.parse(myArray);
$('#busPoint').autocomplete(
source: $.map(jsonString, function(item)
return item.OriginName;
),
select: function(event, ui)
var selectecItem = jsonString.filter(function(value)
return value.OriginName == ui.item.value;
);
alert("OriginId: " + selectecItem[0].OriginId + ", OriginName: " + selectecItem[0].OriginName);
,
minLength: 2,
delay: 100
);
);
</script>
</head>
<body>
<div class="ui-widget">
<hr />
<input type="text" id="busPoint">
</div>
</body>
</html>
我在本地测试过。让我知道这是否是您想要的。
【讨论】：
那么他们有什么办法来处理这种情况吗？ 此答案已修改，请查看并告知。以上是关于带有 JSON 数组字符串的 Jquery 自动完成扩展器的主要内容，如果未能解决你的问题，请参考以下文章
带有从 Rails 生成的 JSON 数据源的 jQuery UI 自动完成 - 不工作