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

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

Oct 21, 2024 am 08:07 AM

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;'>" + 
          "$&" + 
          "</span>");
登入後複製

限制

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

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

附加說明

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

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

示例顏色json文件 示例顏色json文件 Mar 03, 2025 am 12:35 AM

示例顏色json文件

8令人驚嘆的jQuery頁面佈局插件 8令人驚嘆的jQuery頁面佈局插件 Mar 06, 2025 am 12:48 AM

8令人驚嘆的jQuery頁面佈局插件

10個jQuery語法熒光筆 10個jQuery語法熒光筆 Mar 02, 2025 am 12:32 AM

10個jQuery語法熒光筆

構建您自己的Ajax Web應用程序 構建您自己的Ajax Web應用程序 Mar 09, 2025 am 12:11 AM

構建您自己的Ajax Web應用程序

什麼是這個'在JavaScript? 什麼是這個'在JavaScript? Mar 04, 2025 am 01:15 AM

什麼是這個'在JavaScript?

10 JavaScript和JQuery MVC教程 10 JavaScript和JQuery MVC教程 Mar 02, 2025 am 01:16 AM

10 JavaScript和JQuery MVC教程

See all articles