Jquery自动完成2个输入字段(同一类)

Question

我有两个输入字段,如下所示:

<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>"

对于第一个字段,它可以完美地工作,但对于第二个字段,它只显示accountCode来自item.value.

我已经检查过从服务器收到的JSON在两种情况下是相同的,所以问题出在Javascript中.

你知道为什么会出现这个问题吗？

Answer 1

你的问题就在这里:

}).data("autocomplete")._renderItem

当自动完成窗口小部件绑定到元素时,每个元素都会获得自己的不同autocomplete数据值.然后,当你抢.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) {
        //...
    };
});

您还可以将自动完成小部件单独绑定到每个元素,但将它们保持在一起并使用each设置_renderItem保持所有组织良好.