jQuery UIのオートコンプリート結果で検索語を強調表示する方法は?

オートコンプリート プラグイン結果のカスタマイズ

Q: オートコンプリート ドロップダウン結果で検索語を強調表示できますか?

はい、オートコンプリート プラグインの結果の形式をカスタマイズして、検索した文字を強調表示できます。

A: オートコンプリート ウィジェットのモンキー パッチ

この効果を実現するには、ライブラリ内の内部関数を再定義する手法であるモンキー パッチングを利用します。オートコンプリート ウィジェット (jQuery UI のバージョン 1.8rc3) では、_renderItem 関数がドロップダウン結果の作成を担当します。再定義する方法は次のとおりです。

function monkeyPatchAutocomplete() {
  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 );
}

B: Preserving Case with "$&

一致した文字列の大文字と小文字を保持するには、this.term を $ に置き換えます。 & replace 関数内:

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

C: 制限

このハックには次の制限があります:

• 新しい RegExp オブジェクトは、リスト内にレンダリングされる項目ごとに作成されます。
• 書式設定に CSS クラスは使用されないため、同じページ上の複数のオートコンプリートは同じスタイルになります。

D : 特定のインスタンスへの変更の適用

オートコンプリート インスタンスを 1 つだけ変更する必要がある場合は、次の質問を参照してください: ページ上のオートコンプリートの 1 つだけ インスタンスにパッチを適用する方法は?

以上がjQuery UIのオートコンプリート結果で検索語を強調表示する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。