Выделите автозаполнение jQuery UI

Я использую функцию автозаполнения в jQuery UI 1.8.6. И я хочу выделить соответствующие результаты. Но по какой-то причине, когда я использую регулярное выражение для добавления "сильных" тегов вокруг совпадающих символов, строка сбрасывается. Поэтому я вижу [strong]matching chars[/strong] вместо помеченного текста.

Это javascript, который я использую в настоящее время:

 $(function () {

    $("#autocompleteinputfield").autocomplete({
        source: function (request, response) {

            $.ajax({
                url: "someservice",
                type: "GET",
                dataType: "json",
                data: { filter: request.term, maxResults: 10 },
                success: function (data) {
                    response($.map(data, function (item) {
                        // return { label: item.ID + ' - ' + item.Name, id: item.ID, value: item.Name }
                        var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");

                        return { label: (item.ID + ' - ' + item.Name).replace(regex, "<strong>$1</strong>"),
                                 id: item.ID,
                                 value: item.Name
                                }

                    }))
                }
            });
        },
        select: function (event, ui) {
            alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id)
                    : "Nothing selected, input was " + this.value);
        }
    });

});

Обновление:

"Вход" - это текст, введенный в текстовое поле (в этом случае: [input type = "text" id = "autocompleteinputfield" /]

Результат выглядит следующим образом:

[{ "Описание": "Ничего значимого", "ИД": 3, "Имя": "Джо публично" }]

Ответ 1

Исходный код автозаполнения jQuery является виновником. Если вы посмотрите в фактических файлах javascript, вы найдете это определение для отображения элементов в списке автозаполнения:

_renderItem: function( ul, item) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( $( "<a></a>" ).text( item.label ) )
        .appendTo( ul );
}

Вы увидите, что добавляет ".text(item.label)", из-за чего html будет экранирован. Чтобы решить эту проблему, вам нужно переломить этот метод "_renderItem", заменив строку, добавляющую метку в виде обычного текста, с линией, которая добавляет метку как html. Поэтому обновите свой код следующим образом:

$(function () {
    $("#autocompleteinputfield").autocomplete({
        // leave your code inside here exactly like it was
    })
    .data('autocomplete')._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( '<a>' + item.label + '</a>' )
            .appendTo( ul );
    };
});

Обновление: с версией >= 1.10 из jQuery существуют небольшие модификации:

$(function () {
    $("#autocompleteinputfield").autocomplete({
        // leave your code inside here exactly like it was
    })
    .data('ui-autocomplete')._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "ui-autocomplete-item", item )
            .append( '<a>' + item.label + '</a>' )
            .appendTo( ul );
    };
});

Ответ 2

$.extend($.ui.autocomplete.prototype, {
    _renderItem: function (ul, item) {
        var searchMask = this.element.val();
        var regEx = new RegExp(searchMask, "ig");
        var replaceMask = "<b style=\"color:green;\">$&</b>";
        var html = item.label.replace(regEx, replaceMask);

        return $("<li></li>")
            .data("item.autocomplete", item)
            .append($("<a></a>").html(html))
            .appendTo(ul);
    }
});

Ответ 3

Обычный javascript alert() не отображает html. Посмотрите на использование модального или что-то еще. Или, как говорили другие, опубликуйте определенный ввод/вывод.