примеры - jquery ui combobox




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

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

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

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

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

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


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

Я подошел к mod _renderItem, используя фабрику виджета jQuery UI:

$.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;
}

Если вы используете jquery-ui.js :

acData = $(this).data('autocomplete');// will not work 
//instead use 
acData = $(this).data('uiAutocomplete');

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

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

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

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





autocomplete