web-dev-qa-db-ja.com

すでに入力したテキストに一致するjQueryオートコンプリートの結果を強調表示するにはどうすればよいですか？

クライアントにjQueryオートコンプリートを実装しました。ここで、入力したテキストと一致する結果の部分を強調表示する（たとえば、make bold）ことを求めています。

例えばユーザーが「何か」と入力すると、結果は次のようになります。

何か a

何か b

別の何か

行う何かその他

この機能はjQueryオートコンプリートに組み込まれていますか？もしそうなら、それは何ですか？

それとも、これは私が自分で実装する必要があるものですか？もしそうなら、どこから始めればいいですか？

javascriptjqueryjquery-uijquery-autocompletejquery-ui-autocomplete
17
DaveDev

この機能は組み込まれていませんが、オートコンプリートウィジェットの_renderItem関数を「モンキーパッチ」することで簡単に実現できます。まさにあなたが望むものについては、この質問を見てください：

jQueryUI：オートコンプリートプラグインの結果をカスタムフォーマットするにはどうすればよいですか？

23
vitorbal

以前は同じ要件がありました。

以下のコードがあなたのために働くかもしれません。

「セレクターには注意が必要です」

<script>
  $("#input-search-box")
    .autocomplete({
      //your code
    })
    .data("autocomplete")._renderItem = function(ul, item) {
    var items = $("<li></li>").data("ui-autocomplete-item", item);
    //match and key variables highlight the user's typed input rendering in bold blue for dropdown items.
    var match = new RegExp("^" + this.term, "i"); //i makes the regex case insensitive

    //change initial typed characters of all item.label   replace is plain JS
    var key = item.label.replace(
      match,
      '<span class="required-drop">' + this.term + '</span>'
    );

    items.html("<a>" + key + "</a>").append(ul);
  }; 
</script>

このコードを実装するためにさらにヘルプが必要な場合はお知らせください。

1
Zeeshan Eqbal