jQuery UI オートコンプリート ドロップダウンで検索語を強調表示する方法

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

jQuery UI オートコンプリート プラグインは幅広い機能を提供しますが、常に対応できるわけではありません正確な書式設定要件。ドロップダウン結果内の検索文字シーケンスを強調表示する必要がある場合、プラグインの柔軟性を活用する方法は次のとおりです。

オートコンプリート プラグインのモンキー パッチ

結果をカスタマイズする鍵は、ドロップダウン リスト項目を生成するデフォルトの _renderItem 関数を置き換えることです。これは、「モンキーパッチ」と呼ばれる手法を使用して実行できます。新しい _renderItem 関数を定義すると、結果を目的の形式でレンダリングできます。

実装

次のコード サンプルは、書式設定を行う _renderItem 関数の拡張バージョンを提供します。太字の文字シーケンスの一致:

コードへの統合

$(document).ready(...) ブロック内で MonkeyPatchAutocomplete 関数を呼び出すカスタム書式設定を有効にするには、一度実行します。

制限

この手法は基本的な機能を提供しますが、いくつかの制限があります。

• 項目ごとに個別の正規表現オブジェクトが作成され、効率を最適化できます。
• 書式設定ではインライン スタイルが使用され、同じページ上の複数のオートコンプリート ウィジェット間の一貫性に影響を与える可能性があります。

大文字と小文字の保持

入力された文字と一致させるのではなく、検索文字の元の大文字と小文字を維持するには、コード内で「this.term」の代わりに「$&」を使用します。

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