太字一致ハイライトでオートコンプリート プラグイン表示をカスタマイズする方法

太字一致ハイライトによるオートコンプリート プラグイン結果の表示のカスタマイズ

jQuery UI のオートコンプリート プラグインでは、ドロップダウン結果の検索語をハイライト表示することでユーザーの利便性が向上します経験。この記事では、特定の要件に合わせてこの表示をカスタマイズする方法について説明します。

解決策: モンキー パッチ

内部ライブラリ関数を再定義する手法であるモンキー パッチは、解決。候補のリスト項目を生成する _renderItem 関数をオーバーライドすると、カスタム レンダリングが可能になります。

結果の一致する部分に太字のハイライトを追加するモンキー パッチ コードは次のとおりです。

<code class="javascript">function monkeyPatchAutocomplete() {
  $.ui.autocomplete.prototype._renderItem = function(ul, item) {
    var re = new RegExp("^" + this.term);
    var t = item.label.replace(
      re,
      "<span style="font-weight:bold;color:Blue;">" +
        this.term +
        "</span>"
    );
    return $(`<li>`)
      .data("item.autocomplete", item)
      .append(`<a>` + t + "</a>")
      .appendTo(ul);
  };
}</code>

$(document).ready(..) でこの関数を呼び出します:

<code class="javascript">$(document).ready(function() {
  monkeyPatchAutocomplete();
});</code>

考慮事項:

このハック手法にはいくつかの制限があります:

• 正規表現パターンはレンダリングされたアイテムごとに作成されますが、再利用することもできます。
• 書式設定には CSS クラスの代わりにインライン スタイルが使用されます。

これらの制限にもかかわらず、この手法により、ドロップダウン結果内の一致する用語が効果的に強調表示され、必要な要件が満たされます。

以上が太字一致ハイライトでオートコンプリート プラグイン表示をカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。