如何在 jQuery UI 中自訂自動完成外掛程式結果格式?
Oct 21, 2024 am 08:07 AM自訂自動完成外掛程式結果格式
使用流行的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中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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