我有两个输入字段：
<input name="accountCode" class="accountCode grid_2"/> <input name="accountCode" class="accountCode grid_2"/>
我想在这两个领域都有一个自动完成.我写了以下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);
};
当然,我的服务器返回2个字段的JSON数据：accountCode和accountName.
我想要这两个输入在_renderItem中使用自定义渲染器,以便这将显示在列表中：
"<a><strong>" + item.value + " </strong>" + item.desc + "</a>"
对于第一个字段,它工作正常,但对于第二个字段,它只显示来自item.value的accountCode.
我检查了从服务器收到的JSON在两种情况下都是一样的,所以问题出在了Javascript中.
你知道为什么这个问题存在吗？
解决方法
你的问题在这里：
}).data("autocomplete")._renderItem
当自动完成小部件绑定到一个元素时,每个元素都获得自己独特的自动填充数据值.然后,当您抓住.data(‘autocomplete’)设置_renderItem函数时,您只能获得两个不同数据对象之一;所以第一个文本字段获取您的自定义渲染器,但第二个文本字段保留与默认渲染器.
您可以通过播放此HTML来查看发生的情况：
<div id="a"></div> <div id="b"></div> <div id="out"></div>
而这个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>');
和现场演示：http://jsfiddle.net/ambiguous/DM8Wv/2/
检查jsfiddle是什么,你应该看到发生了什么.
您可以遍历自动填充字段并单独设置_renderItem(未经测试的代码)：
$(".accountCode").autocomplete({
//...
}).each(function() {
$(this).data('autocomplete')._renderItem = function(ul,item) {
//...
};
});
您还可以将自动完成的小部件单独绑定到每个元素,但将其保持在一起,并使用每个元素设置_renderItem保持一切都很好的组织.
