Jquery自动完成2个输入字段（同一类）
我有两个输入字段，如下所示：
我希望在这两个领域都有自动完成function。 我写了以下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 $("").data("item.autocomplete", item).append( "" + item.value + " " + item.desc + "") .appendTo(ul); };
当然，我的服务器返回带有2个字段的JSON数据： accountCode和accountName 。
我希望两个输入都使用_renderItem的自定义渲染器，以便它将显示在列表中：
"" + item.value + " " + item.desc + ""
对于第一个字段，它完美地工作，但对于第二个字段，它仅显示来自item.value的accountCode 。
我已经检查过从服务器收到的JSON在两种情况下是相同的，所以问题出在Javascript中。
你知道为什么会出现这个问题吗？
你的问题就在这里：
}).data("autocomplete")._renderItem
当自动完成窗口小部件绑定到元素时，每个元素都会获得其自己的不同autocomplete数据值。 然后，当您获取.data('autocomplete')来设置_renderItem函数时，您将只获得两个不同数据对象中的一个; 所以第一个文本字段获取自定义渲染器，但第二个文本字段保留默认渲染器。
您可以通过使用此HTML查看正在发生的事情：
而这个jQuery：
var $out = $('#out'); $out.append('Setting both to {a:"a"}
'); $('#a').data('pancakes', { a: 'a' }); $('#b').data('pancakes', { a: 'a' }); $out.append('#aa = ' + $('#a').data('pancakes').a + '
'); $out.append('#ba = ' + $('#b').data('pancakes').a + '
'); $out.append('Setting "div".a to "x"
'); $('div').data('pancakes').a = 'x'; $out.append('#aa = ' + $('#a').data('pancakes').a + '
'); $out.append('#ba = ' + $('#b').data('pancakes').a + '
');
一个现场演示： http ： //jsfiddle.net/ambiguous/DM8Wv/2/
检查jsfiddle的作用，你应该看看发生了什么。
您可以遍历自动填充字段并使用类似的内容（未经测试的代码）单独设置_renderItem ：
$(".accountCode").autocomplete({ //... }).each(function() { $(this).data('autocomplete')._renderItem = function(ul, item) { //... }; });
您还可以将自动完成窗口小部件单独绑定到每个元素，但将它们保持在一起并使用each元素设置_renderItem可以使所有内容保持良好组织。
非常好的解决方案：
.each(function() { $(this).data('autocomplete')._renderItem = function(ul, item) { //... }; });
使用相同类调用自动完成的目的是希望在几个相似字段中显示相同的帮助列表。
它对我有用!!! http://www.arctickiwi.com/blog/jquery-autocomplete-labels-escape-html-tags
（只需在您的Javascript中添加代码，您的HTML代码就不会再在自动填充中转义）