2 个输入字段的 Jquery 自动完成（同一类）

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< /code> 来自 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/ambiguously/DM8Wv/2/

检查 jsfiddle 做了什么，您应该看到发生了什么。

您可以迭代自动完成字段并使用如下内容单独设置 _renderItem （未经测试的代码）：

$(".accountCode").autocomplete({
    //...
}).each(function() {
    $(this).data('autocomplete')._renderItem = function(ul, item) {
        //...
    };
});

您还可以将自动完成小部件单独绑定到每个元素，但将其全部放在一起并使用 each 设置_renderItem 可以使一切井井有条。

Answer 2

非常好的解决方案：

.each(function() {
    $(this).data('autocomplete')._renderItem = function(ul, item) {
        //...
    };
});

使用同一类调用自动完成功能的目的是当您希望在几个相似的字段中显示相同的帮助列表时。

Answer 3

这对我有用！
http://www.arctickiwi.com/blog/jquery-autocomplete -labels-escape-html-tags

（只需将代码添加到 Javascript 中的某处，您的 HTML 标签就不会再在自动完成中转义）