jQuery 2个输入字段的Jquery自动完成（同级）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7410962/
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
Jquery Autocomplete for 2 input field (same class)
提问by Thang Nguyen
I have two input fields like this:
我有两个这样的输入字段：
<input name="accountCode" class="accountCode grid_2"/>
<input name="accountCode" class="accountCode grid_2"/>
I want to have an autocompleter on both of these fields. I have written the following JavaScript:
我想在这两个领域都有一个自动完成程序。我编写了以下 JavaScript：
$(".accountCode").autocomplete(
{
minLength : 1,
source : function(request, response) {
$.ajax({
url : baseUrl + "Autocomplete/Account?accountCode=" + $(this).val(),
dataType : "json",
success : function(data) {
response($.map(data, function(item) {
return {
value : item.accountCode,
desc : item.accountName
}
}));
}
});
},
focus : function(event, ui) {
$(this).val(ui.item.accountCode);
return false;
},
select : function(event, ui) {
// $("#category").val( ui.item.name );
$(this).val(ui.item.value);
// $( "#project-description" ).html( ui.item.desc );
return false;
}
}).data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>").data("item.autocomplete", item).append(
"<a><strong>" + item.value + " </strong>" + item.desc + "</a>")
.appendTo(ul);
};
Of course, my server returns JSON data with 2 field: accountCodeand accountName.
当然，我的服务器返回带有 2 个字段的 JSON 数据：accountCode和accountName。
I want both inputs to use the custom renderer in _renderItemso that this will be displayed in the list:
我希望两个输入都使用自定义渲染器，_renderItem以便将其显示在列表中：
"<a><strong>" + item.value + " </strong>" + item.desc + "</a>"
For the first field, it works perfectly, but for second field it only displays the accountCodefrom item.value.
对于第一个字段，它工作得很好，但对于第二个字段，它只显示accountCodefrom item.value。
I've checked that the JSON received from the server is the same in both cases so the problem is in the Javascript.
我已经检查过从服务器收到的 JSON 在两种情况下都相同，所以问题出在 Javascript 中。
Do you know why this problem exist?
你知道为什么会出现这个问题吗？
回答by mu is too short
Your problem is right here:
你的问题就在这里：
}).data("autocomplete")._renderItem
When the autocomplete widget binds to an element, each element gets its own distinct autocompletedata value. Then, when you grab the .data('autocomplete')to set the _renderItemfunction, you'll only get oneof the two distinct data objects; so the first text field gets your custom renderer but the second one stays with the default renderer.
当自动完成小部件绑定到一个元素时，每个元素都会获得自己独特的autocomplete数据值。然后，当你抢.data('autocomplete')来设置_renderItem功能，你只能得到一个两个不同的数据对象; 所以第一个文本字段获取您的自定义渲染器，但第二个文本字段保留默认渲染器。
You can see what's going on by playing with this HTML:
您可以通过使用此 HTML 来查看发生了什么：
<div id="a"></div>
<div id="b"></div>
<div id="out"></div>
And this jQuery:
这个jQuery：
var $out = $('#out');
$out.append('<p>Setting both to {a:"a"}</p>');
$('#a').data('pancakes', { a: 'a' });
$('#b').data('pancakes', { a: 'a' });
$out.append('<p>#a.a = ' + $('#a').data('pancakes').a + '</p>');
$out.append('<p>#b.a = ' + $('#b').data('pancakes').a + '</p>');
$out.append('<p>Setting "div".a to "x"</p>');
$('div').data('pancakes').a = 'x';
$out.append('<p>#a.a = ' + $('#a').data('pancakes').a + '</p>');
$out.append('<p>#b.a = ' + $('#b').data('pancakes').a + '</p>');
And a live demo: http://jsfiddle.net/ambiguous/DM8Wv/2/
和现场演示：http: //jsfiddle.net/ambiguous/DM8Wv/2/
Check what the jsfiddle does and you should see what's going on.
检查 jsfiddle 做了什么，你应该看看发生了什么。
You can iterate through the autocomplete fields and set the _renderItemindividually with something like this (untested code):
您可以遍历自动完成字段并_renderItem使用以下内容（未经测试的代码）单独设置：
$(".accountCode").autocomplete({
//...
}).each(function() {
$(this).data('autocomplete')._renderItem = function(ul, item) {
//...
};
});
You could also bind the autocomplete widget to each element individually but keeping it all together and using eachto set the _renderItemkeeps everything nicely organized.
您还可以将自动完成小部件单独绑定到每个元素，但将它们放在一起并使用each设置_renderItem保持一切井井有条。
回答by Steffan
Very nice solution with respect to:
非常好的解决方案：
.each(function() {
$(this).data('autocomplete')._renderItem = function(ul, item) {
//...
};
});
The purpose of calling auto-complete with the same class is when you want to have the same help list to show up in several similar fields.
使用相同的类调用自动完成的目的是当您希望在几个相似的字段中显示相同的帮助列表时。
回答by guest1
It's works for me!!! http://www.arctickiwi.com/blog/jquery-autocomplete-labels-escape-html-tags
它对我有用！！！ http://www.arctickiwi.com/blog/jquery-autocomplete-labels-escape-html-tags
(Just add code to your Javascript somewhere and your HTML tags won't be escaped anymore in Autocomplete)
（只需将代码添加到您的 Javascript 某处，您的 HTML 标签将不再在自动完成中转义）
