如何在jquery自動填充中顯示空白選項？

我正在使用jQuery自動完成與combobox nabled。我想顯示一個空的選項，但是每當我將我的初始選擇的值設置爲空字符串時，它不顯示在組合框中。如何在jquery自動填充中顯示空白選項？

該項目是目前它只是沒有高度。

是否可以在自動完成組合框上有空白選項？

來源

2011-07-15 BentOnCoding

你試圖附加一個「

」的建議名單後頂部它得到的建議？你可以在'open'事件中插入它。 – orolo

這不起作用，因爲沒有一些實際的內容，combobox會將行高降低到無。 – BentOnCoding

所以我們想出瞭解決方案。您需要使用_renderItem方法。

input.data("autocomplete")._renderItem = function(ul, item) { 
    var listItem; 
    if (item.label == "<strong></strong>") { 
     listItem = $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a><br></a>") 
       .appendTo(ul); 
    } else { 
     listItem = $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.label + "</a>") 
       .appendTo(ul); 
    } 

    return listItem; 
};

請注意，您必須在您的初始列表中有一個空白字符串項目才能工作。

來源

2011-07-15 21:47:39 BentOnCoding

精彩：D，謝謝!!!! –

我有同樣的問題，解決了這個問題是這樣的：

$autocomplete.data("autocomplete")._renderItem = function(ul, item) { 
    return $j("<li></li>") 
     .data("item.autocomplete", item) 
     .append(item.label === '' ? '<a>&nbsp;</a>' : "<a>" + item.label + "</a>") 
     .appendTo(ul); 
}

當項標籤是空的（item.label === ''）我只是添加，而不是標籤包含不間斷空格（ ）的鏈接。

編輯：

我意識到這可能會引入XSS漏洞。如果可能包含用戶輸入，請確保您轉義項目標籤。可以選用一些逃生功能，例如underscore.js's escape function：

"<a>" + _.escape(item.label) + "</a>"

或建立使用jQuery這樣的錨元素：

$('<a/>').text(item.label)

來源

2012-02-01 16:29:38

這對我有用。但是，我不得不爲數據項使用'ui-autocomplete'。 –

兩個解決方案張貼在這裏，我沒有工作。 _renderItem甚至沒有調用空選項。

以下是我的工作原理：我對功能進行了非常小的編輯，將選擇選項映射到自動補全項目。

response(select.children("option").map(function() { 
var text = $(this).text(); 
if (/*this.value && */(!request.term || matcher.test(text))) 
    return { 
     label: text.replace(
      new RegExp(
       "(?![^&;]+;)(?!<[^<>]*)(" + 
       $.ui.autocomplete.escapeRegex(request.term) + 
       ")(?![^<>]*>)(?![^&;]+;)", "gi" 
      ), "<strong>$1</strong>"), 
     value: text, 
     option: this 
    }; 
}));

我所做的一切都是評論條件的一部分。

/*this.value && */

然後我添加到我的樣式表自動完成項目的規則。

.ui-autocomplete .ui-menu-item a 
{ 
    min-height: 15px; 
}

來源

2012-08-05 00:36:30 Bassem

$("#ctrl").autocomplete({ 
    source: [ "\u00A0", "One", "Two" ] 
});

來源

2013-12-02 11:47:44 SergeyA

我喜歡這個解決方案，非常易於安裝。乾杯 – asgeo1

最近，我有這個問題，而其它解決方案大多是正確的，我發現有缺少一個步驟。

if (this.value && (!request.term || matcher.test(text)))

需要改變，以

if (!request.term || matcher.test(text))

否則會出現在源沒有空項。

與其他的解決方案，_renderItem改變

input.data('autocomplete')._renderItem = function(ul, item) { 
     return $('<li></li>') 
      .data('item.autocomplete', item) 
      .append(item.label === '<strong></strong>' ? '<a>&nbsp;</a>' : '<a>' + item.label + '</a>') 
      .appendTo(ul); 
     }

這是BentOnCoding的和蒂姆·布泰的解決方案的混合

來源

2013-12-09 21:52:17 Calummm

如何在jquery自動填充中顯示空白選項？

回答

相關問題