使用jQuery回调自动完成（标签/值对）
我试图实现自动完成jQuery，但我不了解jQuery UI提供的自动完成功能。
它使用回调函数并将响应作为标签/值对获取。 我有一些示例代码，我试图传递一个任意的标签/值对并显示该选项，但它不起作用。 如果有人能帮我解决这个问题，或者给我一个简单的程序，那就太好了。
http://jsfiddle.net/kB25J/
HTML：
<html>
<body>
Please enter your country name
<input id ="book" type="text" value="">
</body>
</html>
JavaScript的：
$("#book").autocomplete({
source: function(request, response) {
alert(request.term);
response(function() {
return {
label: "hi",
value: "bye"
}
});
alert(reponse);
}
});
谢谢
发送响应时，传递数组而不是函数。
$(function() {
$("#book").autocomplete({
source: function(request, response) {
var data = [{
label: "hi",
value: "bye"
}];
response(data);
},
select: function( event, ui ) {
$( "#book" ).val( ui.item.label); //ui.item is your object from the array
return false;
}
});
});
即使在这种情况下只有1个匹配'hi'/'bye'，你应该在你的源码中返回一个数组，
正如jqueryui.com上的这个例子所见
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
它使用远程响应中的映射返回一组用于标签/值的键/值对。
如果你的源只是一个国家列表，你可以使用一串字符串作为源。
var countries = ["USA", "Canada", "Mexico", ...]
$('input').autocomplete({
source : countries
});
如果您正在使用远程源：
$('input').autocomplete({
source : function (request, response) {
$.ajax({
url: "url_to_get_countries",
dataType: "json",
success: function( data ) {
response( $.map( data.countries, function( item ) {
return {
label: item.country_name,
value: item.country_id
}
}));
}
});
}
});
@LakshmikanthanVijayaraghavan
正如你在Autocomplete指南中看到的那样，有三种方法可以用jquery插件实现自动完成。
前两个选项是针对固定的值列表。 如果您想要自动填充自动填充列表，则必须实施最后一个列表。
要做到这一点，你必须指定一个url来获取对象数组。 如果要隐藏标签和密钥，则需要创建隐藏的输入类型并设置其值。
例如
$( "#book" ).autocomplete({
source: "getValues.htm",
select: function(event, ui) {
$( "#book" ).val(ui.item.label);
$( "#book_hidden" ).val(ui.item.value);
return false;
}
});
getValues.html必须返回标签/值对的数组。
希望这可以帮助
链接地址: http://www.djcxy.com/p/65277.html