如何在 jQuery UI 自動完成下拉清單中突出顯示搜尋詞？

自訂自動完成外掛程式結果

jQuery UI 自動完成外掛程式提供了廣泛的功能，但它可能不會總是滿足您精確的格式要求。如果您需要在下拉結果中突出顯示搜尋字元序列，可以透過以下方式利用外掛程式的彈性：

猴子修補自動完成外掛程式

The自訂結果的關鍵是取代產生下拉清單項目的預設_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'>$&</span>");
  return $( "<li></li>" )
    .data("item.autocomplete", item)
    .append( "<a>" + t + "</a>" )
    .appendTo(ul);
};

整合到您的程式碼

在$(document).ready(...) 區塊中呼叫MonkeyPatchAutocomplete 函數一次即可啟用自訂格式：

monkeyPatchAutocomplete();

限制

雖然此技術提供了基本功能，但它有一些限制：

• 它為每個項目創建一個單獨的正規表示式對象，可以優化效率。
• 格式設定使用內聯樣式，這可能會影響同一頁面上多個自動完成小工具之間的一致性。

保留大小寫

要保持搜尋字符的原始大小寫而不是匹配鍵入的字符，請在代碼中使用“$&”而不是「this.term」：

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

以上是如何在 jQuery UI 自動完成下拉清單中突出顯示搜尋詞？的詳細內容。更多資訊請關注PHP中文網其他相關文章！