如何在 jQuery UI 中自訂自動完成外掛程式結果格式？

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

使用流行的jQuery UI 自動完成外掛程式時，您可能會遇到需要在文字中反白顯示特定字元序列的情況。下拉結果以增強使用者體驗。本文介紹如何實現此效果。

Monkey-Patching the Autocomplete Widget

要自訂結果格式，您需要取代預設的 _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) 中呼叫此函數一次。 ready(...) 事件處理程序來啟動自訂。

處理區分大小寫

如果您想保留匹配字串的大小寫而不是使用大小寫鍵入的字符，使用此行：

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

限制

雖然此方法允許您在下拉結果中突出顯示搜尋字詞，但它也有限制：

• 頁面上的每個自動完成小工具都會受到影響。
• 該術語透過內聯樣式而不是 CSS 類別突出顯示。

附加說明

如果您只需要在頁面上自訂自動完成小部件的一個特定實例，您可以使用更有針對性的方法。詳情請參閱文件。

以上是如何在 jQuery UI 中自訂自動完成外掛程式結果格式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！