web-dev-qa-db-ja.com

jquery uiオートコンプリートで一致したテキストを太字にする方法は？

Jquery uiオートコンプリートを使用するときに、オートコンプリート候補の一致する部分を太字にする方法を知りたいですか？

たとえば、「ja」と入力し、提案がjavascriptとJava（jquery uiデモページの例のように）である場合）、両方で「ja」を太字にします。提案。

誰もがそれを行う方法を知っていますか？

助けてくれてありがとう...

jqueryjquery-uiautocomplete
24
apolka

オートコンプリートが、含まれている他の機能（ドロップ可能、ソート可能、ドラッグ可能など）と比較して、なぜそれほど必要最低限​​なのかわかりません。

それは本当にあなたにスタイリング可能なオプションを提供するはずです、例えば。 <span class="ui-autocomplete-term">term</span>または同様のものでラップします。

あなたはそれを次のようにすることができます this

それはかなり自明のはずです。そうでない場合は、叫び声を上げてください。

42
peol

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

使用している場合 jquery-ui.js ：

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

大文字と小文字を区別せずに検索する場合の解決策は次のとおりです（open関数のみが異なります）。

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

JQuery UI 1.9.xでは、acDataが定義されていないため、このソリューションは機能しませんでした。ドキュメントの準備ができる前にPluginHelperを初期化したため、データ参照のタイミングが間違っていました。

JQueryUIウィジェットファクトリを使用して_renderItemを変更することにしました。

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