オートコンプリート プラグインで結果の表示形式をカスタマイズするにはどうすればよいですか?

オートコンプリート プラグインでの結果表示形式のカスタマイズ

jQuery UI オートコンプリート プラグインは、ユーザー入力を処理し、関連するオプションを提案する強力な方法を提供します。 。デフォルトでは、ドロップダウン結果には、提案された項目内のユーザー入力の一致が表示されます。ただし、表示された結果で検索文字を強調表示するなど、よりカスタマイズされた形式が必要な場合があります。

プラグインのモンキー パッチ

これを実現するには、次のことができます。 「モンキーパッチ」として知られる手法を使用し、ライブラリ内の内部関数を再定義します。この場合、ドロップダウン リスト内の各項目の作成を担当する _renderItem 関数をオーバーライドする必要があります。

カスタマイズされた _renderItem 関数の作成

例を次に示します。カスタマイズされた _renderItem 関数:

$.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></li>" )
    .data( "item.autocomplete", item )
    .append( "<a>" + t + "</a>" )
    .appendTo( ul );
};

この関数は、正規表現を使用して一致する文字を分離し、特定のスタイルを備えた HTML の Span 要素でそれらをラップします。スパン要素は、太字のフォントと青色を使用して一致を強調表示します。

パッチの適用

カスタマイズした関数を作成したら、それを適用できます。ドキュメント準備完了イベント内で次の関数を呼び出して、オートコンプリート ウィジェットを開きます:

monkeyPatchAutocomplete();

この関数は、デフォルトの _renderItem 関数をカスタマイズしたバージョンに置き換えます。

大文字と小文字の保持

上記のコードは一致を強調表示しますが、元の入力の大文字と小文字は保持しないことに注意してください。大文字と小文字を区別しないように、_renderItem 関数内の置換行を次のように変更します。

var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + "$&amp;" + "</span>");

ターゲット パッチ

上記の変更は、ページ上のすべてのオートコンプリート ウィジェットに影響します。特定のインスタンスのみをカスタマイズしたい場合は、「ページ上のオートコンプリートの 1 つだけ インスタンスにパッチを適用する方法?」

以上がオートコンプリート プラグインで結果の表示形式をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。