使用jQuery回调自动完成（标签/值对）
我正在尝试实现自动完成jQuery，但我不理解jQuery UI提供的自动完成function。
它使用回调函数并将响应作为标签/值对进行获取。 我有一些示例代码，我试图传回任意标签/值对并显示该选项，但它不起作用。 如果有人可以帮我解决这个问题，或者向我展示一个简单的程序，那就太棒了。
http://jsfiddle.net/kB25J/
HTML：
Please enter your country name 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
正如您在自动完成指南中所看到的，有三种方法可以使用jquery插件实现自动完成。
- 提供包含值列表的数组
- 提供对象值/标签对象的数组
- 提供一个url来获取对象数组
前两个选项用于固定的值列表。 如果要以dinamically方式填充自动完成列表，则必须实现最后一个。
为此，您必须指定一个url来获取objects数组。 如果要保持标签和键隐藏，则需要创建隐藏的输入类型并设置其值。
例如
$( "#book" ).autocomplete({ source: "getValues.htm", select: function(event, ui) { $( "#book" ).val(ui.item.label); $( "#book_hidden" ).val(ui.item.value); return false; } });
getValues.html必须返回标签/值对的数组。
希望这可以帮助
@Edathadan您的回答是最好的解决方案。 但是，我认为我们需要保留原始请求，因此您应该修改为：