我花了好几个小时试图让各种自动完成插件与 JQuery 一起工作。
然后我找到了以下教程: How to Use the jQuery UI Autocomplete Widget
本教程较旧,使用 Jquery 1.4 和 JQuery UI 1.8。如何修改其中的 Javascript 代码使其更符合 JQuery2.0 和 JQuery UI 1.10?
<script type="text/javascript">
$(function(){
//attach autocomplete
$("#to").autocomplete({
//define callback to format results
source: function(req, add){
//pass request to server
$.getJSON("friends.php?callback=?", req, function(data) {
//create array for response objects
var suggestions = [];
//process response
$.each(data, function(i, val){
suggestions.push(val.name);
});
//pass array to callback
add(suggestions);
});
},
//define select handler
select: function(e, ui) {
//create formatted friend
var friend = ui.item.value,
span = $("<span>").text(friend),
a = $("<a>").addClass("remove").attr({
href: "javascript:",
title: "Remove " + friend
}).text("x").appendTo(span);
//add friend to friend div
span.insertBefore("#to");
},
//define select handler
change: function() {
//prevent 'to' field being updated and correct position
$("#to").val("").css("top", 2);
}
});
});
这似乎有3个问题:
- 一个明显的错误是使用已从 JQuery UI-1.10 中删除的 .item。
- 当尝试使用这两个库的较新版本时,它会在文本框中保留默认文本。默认文本来自 JQuery-UI CSS,类似于“您有 2 个结果”。
- 它似乎使用JSONP。是否可以只接受 JSON?
对此的任何帮助都会很棒!