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

83

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"}]
Jason
źródło
2
Chciałbym również, aby ta odpowiedź była, po prostu napotkałem ten sam problem.
Kieran Andrews,

Odpowiedzi:

120

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

Kieran Andrews
źródło
Co robi _renderItem? Czy to jest konwersja HTML?
Jason
2
forum.jquery.com/topic/using-html-in-autocomplete Zobacz drugi post, który opisuje wszystko.
Kieran Andrews
7
W nowych wersjach interfejsu użytkownika jQuery użyj .data ("autouzupełnianie ui"), a nie data ("autouzupełnianie")
Mike Starov
1
Jeśli usuniesz <a>, nie będziesz mógł kliknąć / przewinąć elementu.
Piotr Kula
Jesteś człowiekiem ratującym życie. Chcę sprawdzić Twoją odpowiedź! :)
Sri Harsha Kappala
10

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 &lt;div&gt;sample&lt;/div&gt;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.
Wasiq
źródło
2

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)},
unieważnić
źródło
0

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.

Clarence Liu
źródło
Do Twojej wiadomości: Nie potrzebujesz tego rozwiązania, jeśli używasz AJAX jako źródła, ponieważ i tak jesteś odpowiedzialny za filtrowanie za pomocą podanego w wyszukiwaniu „hasła”
Clarence Liu
0

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!

Ricketts
źródło
2
@PeterMortensen Żałuję, że zredagowałeś go tak, aby zawierał łącze Wikipedii do HTML.
Dan Atkinson,