首頁 > web前端 > js教程 > 如何在 jQuery UI 中自訂自動完成外掛程式結果格式?

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

Barbara Streisand
發布: 2024-10-21 08:07:30
原創
921 人瀏覽過

How to Customize Autocomplete Plugin Result Formatting in 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;'>" + 
          "$&amp;" + 
          "</span>");
登入後複製

限制

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

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

附加說明

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

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

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板