Как сделать согласованный текст полужирным с jquery ui autocomplete?

Мне интересно, как сделать совпадающую часть предложений автозаполнения полужирным при использовании jquery ui autocomplete?

Так, например, если вы введете "ja", а предложения - javascript и java (как в примере на демонстрационной странице jquery ui), я хотел бы сделать "ja" полужирным в обоих предложениях.

Кто-нибудь знает, как это сделать?

Большое спасибо за помощь...

Ответ 1

Я не уверен, почему автозаполнение является таким же голым по сравнению с другими его функциональными возможностями (например, droppable, sortable, draggable и т.д.).

Он действительно должен предложить вам стилизованный вариант, например. обертывая его <span class="ui-autocomplete-term">term</span> или что-то подобное.

Вы можете сделать это как this

Это должно быть довольно понятным; если нет, дай мне крик.

Ответ 2

В jQuery UI 1.11.1 вот код, который я использовал для его работы (без учета регистра):

open: function (e, ui) {
    var acData = $(this).data('ui-autocomplete');
    acData
    .menu
    .element
    .find('li')
    .each(function () {
        var me = $(this);
        var keywords = acData.term.split(' ').join('|');
        me.text(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<b>$1</b>'));
     });
 }

Ответ 3

Если вы используете http://code.jquery.com/ui/1.10.0/jquery-ui.js. acData = $(this).data('autocomplete'); вместо этого не будет работать acData = $(this).data('uiAutocomplete');

Ответ 4

Здесь решение для тех, кто хочет искать регистр без учета регистра (только открытая функция является diffirent):

        open: function(e,ui) {
            var
            acData = $(this).data('autocomplete');

            acData
            .menu
            .element
            .find('a')
            .each(function() {
                var me = $(this);
                var regex = new RegExp(acData.term, "gi");
                me.html( me.text().replace(regex, function (matched) {
                    return termTemplate.replace('%s', matched);
                }) );
            });
        }

Ответ 5

В jQuery UI 1.9.x это решение не сработало для меня, потому что acData был undefined - время ссылки на данные было неправильным, потому что я инициализирую свой PluginHelper до того, как документ будет готов.

Я подошел к mod _renderItem, используя виджет jQuery UIs factory:

$.widget("custom.autocompleteHighlight", $.ui.autocomplete, {
    _renderItem: function (ul, item) {
        var regexp = new RegExp('(' + this.term + ')', 'gi'),
            classString = this.options.HighlightClass ?  ' class="' + this.options.highlightClass + '"' : '',
            label = item.label.replace(regexp, '<span' + classString + '>$1</span>');

        return $('<li><a href="#">' + label + '</a></li>').appendTo(ul);
    }
});

Теперь вы можете использовать его с помощью:

$('input.jsAutocompleteHighlight').autocompleteHighlight({
        highlightClass: 'ui-autocomplete-highlight'
});

Стиль CSS:

.ui-autocomplete-highlight {
    font-weight: bold;
}