如何自訂自動完成外掛程式中的結果顯示格式？

在自動完成外掛程式中自訂結果顯示格式

jQuery UI 自動完成外掛提供了一種強大的方法來處理使用者輸入並建議相關選項。預設情況下，下拉結果顯示建議項目中使用者輸入的符合項目。但是，您可能需要更自訂的格式，例如反白顯示結果中的搜尋字元。

猴子修補外掛程式

要實現此目的，您可以採用稱為「猴子修補」的技術，您可以在庫中重新定義內部函數。在這種情況下，您需要重寫負責建立下拉清單中每個項目的 _renderItem 函數。

建立自訂_renderItem 函數

這裡是一個範例自訂_renderItem 函數：

$.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 );
};

此函數使用正規表示式來隔離匹配的字符，並將它們包裝在具有特定樣式的HTML span 元素中。 span 元素使用粗體和藍色突出顯示匹配項。

套用修補程式

建立自訂函數後，您可以將其套用到透過在文件就緒事件中呼叫以下函數來自動完成小工具：

monkeyPatchAutocomplete();

此函數將用您的自訂版本取代預設的_renderItem 函數。

保留字元大小寫

請注意，上面的程式碼突出顯示匹配項，但不保留原始輸入的大小寫。若要保留大小寫，請修改_renderItem 函數中的替換行，如下所示：

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

定向修補

上述變更會影響頁面上的所有自動完成小工具。如果您只想自訂特定實例，請參閱問題「如何在頁面上修補僅一個自動完成實例？」

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