如何在 jQuery UI 自動完成結果中突出顯示搜尋詞？

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

問：我可以在自動完成下拉結果中反白搜尋字詞嗎？

是的，您可以自訂自動完成外掛程式結果的格式以突出顯示搜尋到的字元。

A: Monkey-Patching the Autocomplete Widget

為了實現這種效果，請利用猴子修補，這是一種重新定義庫中的內部函數的技術。在 Autocomplete 小工具（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: 使用"$& 保留大小寫

要保留匹配字串的大小寫，請將this .term 替換為$ & 在替換函數中：

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

C：限制

此hack 有以下限制：

• 此hack 有以下限制：
• 一個新的RegExp 物件為清單中渲染的每個項目建立。

D ：將變更套用至特定實例

如果您只需要修改一個自動完成實例，請參閱以下問題：如何在頁面上修補

僅一個自動完成實例？

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