Przed jQuery UI 1.8.4 mogłem używać HTML w tablicy JSON, którą zbudowałem do pracy z autouzupełnianiem.
Udało mi się zrobić coś takiego:
$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';
Pojawi się jako czerwony tekst na liście rozwijanej.
Od 1.8.4 to nie działa. Znalazłem http://dev.jqueryui.com/ticket/5275, który mówi mi, żebym użył tutaj niestandardowego przykładu HTML , z którym nie miałem szczęścia.
Jak mogę sprawić, aby HTML pojawił się w sugestii?
Moje jQuery to:
<script type="text/javascript">
$(function() {
$("#findUserIdDisplay").autocomplete({
source: "ui_autocomplete_users_withuname.php",
minLength: 2,
select: function(event, ui) {
$('#findUserId').val(ui.item.id);
}
});
});
</script>
Moja tablica JSON zawiera kod HTML podobny do następującego:
[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]
Odpowiedzi:
Dodaj to do swojego kodu:
).data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>"+ item.label + "</a>" ) .appendTo( ul ); };
Twój kod staje się więc:
<script type="text/javascript"> $(function () { $("#findUserIdDisplay").autocomplete({ source: "ui_autocomplete_users_withuname.php", minLength: 2, select: function (event, ui) { $('#findUserId').val(ui.item.id); return false; } }).data("ui-autocomplete")._renderItem = function (ul, item) { return $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.label + "</a>") .appendTo(ul); }; }); </script>
Uwaga: w starszych wersjach jQueryUI użyj
.data("autocomplete")"
zamiast.data("ui-autocomplete")
źródło
<a>
, nie będziesz mógł kliknąć / przewinąć elementu.Jest to również udokumentowane w dokumentacji autouzupełniania jquery-ui pod adresem : http://api.jqueryui.com/autocomplete/#option-source
Sztuczka jest taka:
autocomplete({ html:true});
<div>sample</div>
w polu „etykieta” danych wyjściowych JSON do autouzupełniania.Jeśli nie wiesz, jak dodać wtyczkę do interfejsu użytkownika JQuery, to:
źródło
To rozwiązanie nie jest zalecane, ale możesz po prostu edytować plik źródłowy jquery.ui.autocomplete.js (v1.10.4)
Oryginalny:
_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},
Naprawiony:
_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},
źródło
Miałem ten sam problem, ale wolę używać statycznej tablicy opcji dla mojej opcji („źródło”) w celu zwiększenia wydajności. Jeśli wypróbowałeś to z tym rozwiązaniem, przekonasz się, że jQuery przeszukuje również całą etykietę.
EG, jeśli dostarczyłeś:
[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]
Wpisanie „span” spowoduje dopasowanie obu wyników, a wyszukiwanie tylko wartości spowoduje nadpisanie
$.ui.autocomplete.filter
funkcji:$.ui.autocomplete.filter = function(a,b){var g=new RegExp($.ui.autocomplete.escapeRegex(b),"i");return $.grep(a,function(c){return g.test(c.value||c)})}
Możesz edytować ostatni parametr
c.value
na cokolwiek chcesz, np.c.id || c.label || c.value
Pozwoliłby ci na wyszukiwanie według etykiety, wartości lub identyfikatora.Możesz podać dowolną liczbę par klucz / wartości do parametru źródłowego autouzupełniania.
PS: oryginalny parametr to
c.label||c.value||c
.źródło
Miałem problem, o którym wspomniał Clarence. Musiałem dostarczyć HTML, aby uzyskać ładny wygląd ze stylami i obrazami. Spowodowało to wpisanie „div” pasujące do wszystkich elementów.
Jednak moją wartością był tylko numer identyfikacyjny, więc nie mogłem pozwolić, aby wyszukiwanie skończyło się tylko na tym. Potrzebowałem wyszukiwania, aby znaleźć kilka wartości, a nie tylko numer identyfikacyjny.
Moim rozwiązaniem było dodanie nowego pola, które zawierało tylko wartości wyszukiwania i sprawdzenie tego w pliku interfejsu użytkownika jQuery. Oto co zrobiłem:
(To jest w interfejsie jQuery UI 1.9.2; na innych może być tak samo).
Edytuj funkcję filtra w linii 6008:
filter: function (array, term) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i"); return $.grep(array, function (value) { if (value.searchonly == null) return matcher.test(value.label || value.value || value); else return matcher.test(value.searchonly); }); }
Dodałem czek dla pola „value.searchonly”. Jeśli tam jest, używa tylko tego pola. Jeśli go tam nie ma, działa normalnie.
Następnie używasz autouzupełniania dokładnie tak, jak poprzednio, z wyjątkiem tego, że możesz dodać klucz „searchonly” do obiektu JSON.
Mam nadzieję, że to komuś pomoże!
źródło