jQuery的自动完成2输入字段（同一类） [英] Jquery Autocomplete for 2 input field (same class)

问题描述

我有两个输入字段是这样的：

I have two input fields like this:

<input name="accountCode" class="accountCode grid_2"/>
<input name="accountCode" class="accountCode grid_2"/>

我想有这两个领域的autocompleter。我写了下面的JavaScript：

I want to have an autocompleter on both of these fields. I have written the following 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数据：帐户code 和帐户名

我想都投入使用 _renderItem 自定义渲染器，所以这在列表中显示：

I want both inputs to use the custom renderer in _renderItem so that this will be displayed in the list:

"<a><strong>" + item.value + " </strong>" + item.desc + "</a>"

有关的第一个字段，它完美，但对于第二个字段只显示帐户code 从 item.value 。

For the first field, it works perfectly, but for second field it only displays the accountCode from item.value.

在这两种情况下相同的，所以这个问题是在JavaScript的。

I've checked that the JSON received from the server is the same in both cases so the problem is in the Javascript.

你知道为什么这个问题存在吗？

Do you know why this problem exist?

推荐答案

您的问题就在这里：

}).data("autocomplete")._renderItem

在自动完成控件绑定到一个元素，每个元素都有自己独特的自动完成数据值。然后，当你抢。数据（自动完成）设置 _renderItem 功能，你只能得到有一个两个不同的数据对象;所以第一个文本字段得到您的自定义渲染，但与默认渲染器的第二个停留。

When the autocomplete widget binds to an element, each element gets its own distinct autocomplete data value. Then, when you grab the .data('autocomplete') to set the _renderItem function, you'll only get one of the two distinct data objects; so the first text field gets your custom renderer but the second one stays with the default renderer.

您可以看到正在发生的事情与此HTML玩：

You can see what's going on by playing with this 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做什么，你应该看到发生了什么事情。

Check what the jsfiddle does and you should see what's going on.

您可以通过自动完成重复字段，设置 _renderItem 像这样（未经测试code）分别：

You can iterate through the autocomplete fields and set the _renderItem individually with something like this (untested code):

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

您也可以绑定自动完成构件到每个单独的元素，但保持它一起，并使用每个设置 _renderItem 很好地保持组织的一切。

You could also bind the autocomplete widget to each element individually but keeping it all together and using each to set the _renderItem keeps everything nicely organized.

这篇关于jQuery的自动完成2输入字段（同一类）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！