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

Question

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

Это JavaScript, который я сейчас использую:

$("#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" /]

Вывод выглядит так:

[{"Description":"Nothing meaningful","ID":3,"Name":"Joe Public‎"}]

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

Обновление: с версией jQuery = 1,10 есть несколько небольших модификаций:

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

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

Answer 3

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