jQuery UI でオートコンプリート プラグイン結果の書式設定をカスタマイズする方法

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

人気の jQuery UI オートコンプリート プラグインを利用する場合、ユーザーエクスペリエンスを向上させるためのドロップダウン結果。この記事では、この効果を実現する方法について説明します。

オートコンプリート ウィジェットへのモンキー パッチ適用

結果の書式設定をカスタマイズするには、デフォルトの _renderItem 関数を置き換える必要があります。オートコンプリート ウィジェット。この関数は、ドロップダウン リスト内の各項目を作成します。これをオーバーライドすることで、項目の外観を変更してカスタム書式設定を含めることができます。

そのようなモンキー パッチの例を次に示します:

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

$(document) 内でこの関数を 1 回呼び出します。カスタマイズをアクティブ化するためのready(...) イベント ハンドラ。

大文字と小文字の区別の処理

大文字と小文字を使用するのではなく、一致文字列の大文字と小文字を保持したい場合入力した文字については、次の行を使用します:

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

制限

この方法では、ドロップダウン結果内の検索語を強調表示できますが、制限があります:

• ページ上のすべてのオートコンプリート ウィジェットが影響を受けます。
• 用語は CSS クラスではなくインライン スタイルで強調表示されます。

追加メモ

ページ上のオートコンプリート ウィジェットの特定のインスタンスを 1 つだけカスタマイズする必要がある場合は、より的を絞ったアプローチを使用できます。詳細については、ドキュメントを参照してください。

以上がjQuery UI でオートコンプリート プラグイン結果の書式設定をカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。