使用 jQuery 回调自动完成（标签/值对）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12496770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autocomplete using jQuery callback (label/value pair)
提问by Lakshmikanthan Vijayaraghavan
I am trying to implement autocomplete jQuery, but am not understanding the autocompletefunction that jQuery UI provides.
我正在尝试实现自动完成 jQuery，但不了解jQuery UI 提供的自动完成功能。
It uses a callback function and gets the response as a label/value pair. I have some sample code where I am trying to pass an arbitrary label/value pair back and display that option but it isn't working. If someone can help me out with that or show me a simple program it will be great.
它使用回调函数并以标签/值对的形式获取响应。我有一些示例代码，我试图将任意标签/值对传回并显示该选项，但它不起作用。如果有人可以帮助我解决这个问题或向我展示一个简单的程序，那就太好了。
HTML:
HTML：
<html>
<body>
Please enter your country name
<input id ="book" type="text" value="">
</body>
</html>?
JavaScript:
JavaScript：
$("#book").autocomplete({
source: function(request, response) {
alert(request.term);
response(function() {
return {
label: "hi",
value: "bye"
}
});
alert(reponse);
}
});
? Thank You
? 谢谢你
采纳答案by prashanth
When sending response, pass an array instead of function.
发送响应时，传递数组而不是函数。
$(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;
}
});
});?
回答by Mark
You should be returning an array in your source even if its just 1 match in this case 'hi'/'bye'
即使在这种情况下它只有 1 个匹配，您也应该在源中返回一个数组 'hi'/'bye'
As seen in this example on jqueryui.com
如 jqueryui.com 上的这个例子所示
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
Its returning an array of key/value pairs for label/value using a map on the remote response.
它使用远程响应上的映射返回标签/值的键/值对数组。
If your source is just a list of countries you can just use an array of strings as your source.
如果您的来源只是一个国家/地区列表，您可以使用一组字符串作为您的来源。
var countries = ["USA", "Canada", "Mexico", ...]
$('input').autocomplete({
source : countries
});
If you are working with a remote source:
如果您正在使用远程源：
$('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
}
}));
}
});
}
});
回答by Tux9R
@LakshmikanthanVijayaraghavan
@LakshmikanthanVijayaraghavan
As you can see at Autocomplete guide, there are three ways to implement autocomplete with jquery plugin.
正如您在Autocomplete guide 中所见，使用 jquery 插件可以通过三种方式实现自动完成。
- Providing an array with the list of values
- Providing an array of objects whith pairs value/label
- Providing an url to get the object array
- 提供一个包含值列表的数组
- 提供带有值/标签对的对象数组
- 提供一个 url 来获取对象数组
The first two options are for a fixed list of values. If you want to populate the autocomplete list dinamically, you have to implement the last one.
前两个选项用于固定值列表。如果你想动态地填充自动完成列表，你必须实现最后一个。
To do that, you have to specify an url to get the objects array. If you want to keep the label and the key hidden, you need to create an input type hidden and set his value too.
为此，您必须指定一个 url 来获取对象数组。如果你想隐藏标签和键，你需要创建一个隐藏的输入类型并设置他的值。
For example
例如
$( "#book" ).autocomplete({
source: "getValues.htm",
select: function(event, ui) {
$( "#book" ).val(ui.item.label);
$( "#book_hidden" ).val(ui.item.value);
return false;
}
});
getValues.html must return the array of label/values pair.
getValues.html 必须返回标签/值对的数组。
Hope this helps
希望这可以帮助
回答by Arun Prasad E S
Ajax , Key Value pair ,Min Length to trigger search. Simple Code
Ajax，键值对，Min Length 触发搜索。简单代码
<script>
$(function () {
$("#CompanySearch").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Admin/GetCompanyAutoComplete',
dataType: "json",
data: { term: request.term },
success: function (data) {
response(data);
}
});
},
minLength: 2
});
});
</script>
For more
更多
回答by dalmate
@Edathadan Your response is the best solution. But, I think we need to keep the origin request, so you should modify to:
@Edathadan 您的回复是最好的解决方案。但是，我认为我们需要保留原始请求，因此您应该修改为：
<script>
$(function () {
$("#CompanySearch").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Admin/GetCompanyAutoComplete?term=' + request.term,
dataType: "json",
success: function (data) {
response(data);
}
});
},
minLength: 2
});
});
</script>
