自动完成功能无法正常工作
Posted
技术标签:
【中文标题】自动完成功能无法正常工作【英文标题】：Autocomplete feature not working properly 【发布时间】：2020-10-12 14:38:31 【问题描述】：<html>
<head>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<title>Welcome to the page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
</head>
<body>
<input type="text" id="suggestion" />
</body>
<script type="text/javascript">
$.getJSON( "data.json", function( data )
var data_arr = data.map(function(val)
return val.name;
)
auto(data_arr)
);
function auto(data_arr)
$('#suggestion').autocomplete(
source: data_arr
).data("ui-autocomplete")._renderMenu = function (ul, items)
var that = this;
var val = that.element.val();
$.each($.grep(items, function (value, key)
return new RegExp(val.toLowerCase()).test(value.value.toLowerCase().slice(0, val.length))
), function (index, item)
that._renderItemData(ul, item);
);
;
</script>
</html>
数据.json
[
"id": "136599",
"name": "CE712A#BGJ"
,
"id": "137704",
"name": "12C#ABA"
,
"id": "137705",
"name": "F2212A#ABA"
]
以上代码适用于data.json 文件中存在的所需值。一旦输入除data.json 文件之外的任何值，建议就会弹出一点并消失。当data.json 中不存在输入时，我实际上不希望显示任何内容。请帮帮我。
【问题讨论】：
【参考方案1】：考虑以下几点：
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<input type="text" id="suggestion" />
<script type="text/javascript">
$('#suggestion').autocomplete(
source: function(req, resp)
$.getJSON("data.json", function(data)
var data_arr = $.ui.autocomplete.filter(data.map(function(val)
return val.name;
), req.term);
resp(data_arr);
);
);
</script>如果您使用函数作为源，您可以在将 JSON 输出的结果传递给自动完成之前调整它们。如果需要，您可以考虑将它们映射到 label 和 value 对。
查看更多：https://api.jqueryui.com/autocomplete/
【讨论】：
@Beginner 它已经在“实际代码”中，但我无法使用 AJAX 调用进行测试。您必须更新和调整代码以进行测试。 这是我得到的错误：Uncaught TypeError: Cannot read property 'label' of undefined at jquery-ui.js:7143 at Function.grep (jquery.min.js:2) at Function .filter (jquery-ui.js:7142) at Object.success ((index):16) at j (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2)在 x (jquery.min.js:4) 在 XMLHttpRequest.b (jquery.min.js:4)以上是关于自动完成功能无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章