如何解决如何编写jQuery输入自动完成
我正在尝试为输入标签编写自动完成功能，用于自动完成功能的数组来自ajax调用的结果。我已经尝试了很多次，但是它仍然没有为输入搜索获取数据。我正在使用Jquery 1.11.3版本。请帮助！
解决方法
使用此jquery库进行动态自动完成 https://jqueryui.com/autocomplete/
,一旦收到AJAX调用的响应，就需要绑定jquery自动完成功能。这并不简单。您需要使用诸如 select，source和focus 事件之类的自动完成API才能使其正常工作。下面是将用户列表从ajax响应绑定到自动完成输入框的说明。
在 select 函数中，您需要使用所有用户的name属性搜索输入值并仅过滤那些记录。此代码片段不过是根据 name 属性从用户列表中搜索用户。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>jQuery UI Fetch Users</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script>
$(function () {
fetchUsers();
});
function fetchUsers() {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/users/',type: 'GET',contentType: "application/json; charset=utf-8",success: function (data) {
console.log(data);
if (data) {
$("#users").autocomplete({
source: function (request,response) {
response($.map(data,function (obj,key) {
var name = obj.name.toUpperCase();
if (name.indexOf(request.term.toUpperCase()) != -1) {
return {
label: obj.name,value: obj.id
}
} else {
return null;
}
}));
},focus: function (event,ui) {
event.preventDefault();
},select: function (event,ui) {
event.preventDefault();
$('#users').val(ui.item.label);
}
});
}
},error: function (error) {
console.log(error);
}
});
}
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Users: </label>
<input id="users">
</div>
</body>
</html>
有关自动完成API的更多详细信息，请参见jQuery UI documentation。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。