Używanie HTML w autouzupełnianiu interfejsu użytkownika jQuery

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"}]

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")

Jest to również udokumentowane w dokumentacji autouzupełniania jquery-ui pod adresem : http://api.jqueryui.com/autocomplete/#option-source

Sztuczka jest taka:

1. Użyj tego rozszerzenia interfejsu użytkownika jQuery
2. Następnie przejdź do opcji autouzupełniania autocomplete({ html:true});
3. Teraz możesz przekazać html <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:

1. Zapisz wtyczkę (rozszerzenie html Scotta Gonzáleza) w pliku js lub pobierz plik js.
2. Dodałeś już skrypt autouzupełniania jquery-ui na swojej stronie html (lub w pliku jquery-ui js). Dodaj ten skrypt wtyczki po tym autouzupełnianiu pliku javascript.

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

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.filterfunkcji:

$.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.valuena cokolwiek chcesz, np. c.id || c.label || c.valuePozwolił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.

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!