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);
}; 

Конечно, мой сервер возвращает данные JSON с 2 полями: 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, все будет организовано хорошо.

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-теги больше не будут экранированы при автозаполнении)