web-dev-qa-db-ja.com

オートコンプリートjqueryuiで入力単語を強調表示する方法

オートコンプリートテキストボックスに入力した単語を強調表示するのを手伝っていただけませんか。私はすでにオートコンプリートワードを入力しているので、入力した単語だけを強調表示する必要があります。Jqueryオートコンプリートは初めてです。

<Strong>Br</Strong>ijesh //のようなテキストとして出力を取得しています//テキストとして表示されます
そしてBrだけを強調するほどではありません。

以下はスニペットです

$(document).ready(function () {
$("#studentName").autocomplete({
    source: function (request, response) {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Webservice.asmx/GetStudentNames",
            data: "{'prefixText':'" + request.term + "'}",
            dataType: "json", 
            success: function (data) {
           var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");
                response($.map(data.d, function (item) {
                    return {
                    label: item.split('|')[0].replace(regex, "<Strong>$1</Strong>"),
                    val: item.split('|')[1]
                    }
                }))
            },

            failure: function (response) {
                ServiceFailed(result);
            }
        });
    },
    select: function (event, ui) {
     txtStudent(ui.item.val, ui.item.label); //Student name and id used in this method
    },
    minLength: 2
});
});              // End of ready method

私を助けてください。

jquery-uijqueryjquery-autocomplete
22
pal

アイテムをカスタムレンダリングするには、_renderItemメソッドを上書きする必要があるようです。コードは次のようになります。

$("#studentName").autocomplete({/* all your parameters*/})
    .data("autocomplete")._renderItem = function (ul, item) {
        var newText = String(item.value).replace(
                new RegExp(this.term, "gi"),
                "<span class='ui-state-highlight'>$&</span>");

        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<div>" + newText + "</div>")
            .appendTo(ul);
    };

コードでは、強調表示にjQuery UI CSS "ui-state-highlight"を使用しています。代わりに<strong>を使用できます。さらに、this.term内にある可能性のあるRegEx文字をエスケープするコードは含めません。私はあなたに主な考えだけを説明したかった。追加情報については、たとえば 答え を見てください。

[〜＃〜]更新された[〜＃〜]：jQuery UIの最近のバージョンでは、.data("ui-autocomplete")ではなく.data("autocomplete")が使用されています。コードをjQueryの（古いバージョンと新しい）バージョンの両方で機能させるには、次のようにします。

var $elem = $("#studentName").autocomplete({/* all your parameters*/}),
    elemAutocomplete = $elem.data("ui-autocomplete") || $elem.data("autocomplete");
if (elemAutocomplete) {
    elemAutocomplete._renderItem = function (ul, item) {
        var newText = String(item.value).replace(
                new RegExp(this.term, "gi"),
                "<span class='ui-state-highlight'>$&</span>");

        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<div>" + newText + "</div>")
            .appendTo(ul);
    };
}

UPDATED 2：同様に、名前"item.autocomplete"を"ui-autocomplete-item"に変更する必要があります。 ここ を参照してください。

39
Oleg

JQuery UIで正しくレンダリングするには、v1.12.1で「a」ではなく「div」を使用します

$.ui.autocomplete.prototype._renderItem = function (ul, item) {        
    var t = String(item.value).replace(
            new RegExp(this.term, "gi"),
            "<strong>$&</strong>");
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<div>" + t + "</div>")
        .appendTo(ul);
};
5
wildnove

このように実装することもできます。

 $("#studentName").autocomplete({/* all your parameters*/});
    $.ui.autocomplete.prototype._renderItem = function (ul, item) {        
        var t = String(item.value).replace(
                new RegExp(this.term, "gi"),
                "<span class='ui-state-highlight'>$&</span>");
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + t + "</a>")
            .appendTo(ul);
    };
3
Avinash Ranjan

新しいJQueryUIを使用している場合は、これを置き換える必要があります。

.data("autocomplete")._renderItem

これに：

.data("uiAutocomplete")._renderItem
2
Adam

これを機能させるために使用したコードは次のとおりです（大文字と小文字は区別されません）。

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.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<strong>$1</strong>'));
      });
   }
0
Prateek
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
    return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
};

これを使って

0
Rinku Budania