Jak mogę wyświetlić pustą opcję w autouzupełnianiu jquery?

Question

Używam autouzupełniania jquery z combobox nabledowany. Chcę wyświetlić pustą opcję, jednak za każdym razem, gdy ustawię wartość początkowego zaznaczenia na pusty ciąg znaków, nie jest ona wyświetlana w oknie combobox.

Przedmiot jest obecny i nie zawiera żadnej wysokości.

Czy można mieć pustą opcję na liście rozwijanej autouzupełniania?

Answer 1

Więc znaleźliśmy rozwiązanie. Musisz pracować z metodą _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; 
}; 

Należy pamiętać, że aby ta funkcja działała, należy mieć na liście początkowej pusty element.

Answer 2

miałem ten sam problem, rozwiązać go tak:

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

Kiedy etykieta pozycja jest pusta (item.label === '') Ja po prostu dodać link zawierający spację twardą ( ) zamiast etykiecie.

EDIT:

zdałem sobie sprawę, że to może wprowadzić lukę XSS. Upewnij się, że unikniesz etykiety elementu, jeśli może ona zawierać dane wprowadzone przez użytkownika. Albo korzystać z niektórych funkcji escape, na przykład underscore.js's escape function:

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

lub zbudować element zakotwiczenia przy użyciu jQuery tak:

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

Answer 3

dwa roztwory zamieszczone tutaj nie działa dla mnie. _renderItem nie jest nawet wywoływana dla pustych opcji.

Oto, co zadziałało: wykonałem bardzo małą edycję funkcji, która mapuje Wybierz opcje autouzupełniania elementów.

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

Wszystko, co zrobiłem, to komentowanie części warunku.

/*this.value && */ 

Następnie dodałem do mojego arkusza stylów regułę dla elementów autouzupełniania.

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

Answer 4

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

Answer 5

miałem ten problem niedawno i podczas gdy inne rozwiązania były przede wszystkim prawidłowe Znalazłem tam było krokiem brakuje.

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

musi zostać zmieniona na

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

inaczej nie będzie żadnych pustych pozycji w źródle.

Podobnie jak w przypadku innych rozwiązań, zmień _renderItem do

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

Jest to mieszanka roztworu BentOnCoding i Tim Buthe za