Utilizzando HTML in jQuery UI autocomplete

Question

jQuery UI 1.8.4 ho potuto usare HTML nella matrice JSON ho costruito per lavorare con un completamento automatico.

sono stato in grado di fare qualcosa di simile:

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';

che verrebbero visualizzati come testo rosso nella goccia giù.

A partire dal 1.8.4 non funziona. Ho trovato http://dev.jqueryui.com/ticket/5275 che mi dice di usare il HTML personalizzato esempio qui che ho avuto fortuna con.

Come posso fare per ottenere HTML di presentarsi nella suggestione?

Il mio jQuery è:

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

array mio JSON include HTML come il seguente:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

Answer 1

Aggiungi questo al vostro codice:

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

Così il codice diventa:

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

Nota: Su vecchie versioni di jQueryUI uso .data("autocomplete")" invece di .data("ui-autocomplete")

Answer 2

Questo è anche documentato in jQuery-ui documentazione completamento automatico a: http://api.jqueryui.com/autocomplete/#option-source

Il trucco è:

1. utilizzare questa estensione jQuery UI
2. Poi nel completamento automatico autocomplete({ html:true}); passaggio opzione
3. Ora si può passare html <div>sample</div> nel campo "etichetta" di uscita JSON per il completamento automatico.

Se non si sa come aggiungere il plugin per JQuery UI poi:

1. Salva il plugin (Scott González' estensione html) in un file js o scaricare il file js.
2. Hai già aggiunto lo script di completamento automatico jquery-ui nella tua pagina html (o dal file jquery-ui js). Aggiungere questo script plug-in, dopo che il file di completamento automatico javascript.

Answer 3

Questa soluzione non è raccomandato, ma si può solo jquery.ui.autocomplete.js Modifica file sorgente (v1.10.4)

originale:

_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},

fissi:

_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},

Answer 4

Ho avuto lo stesso problema, ma io preferisco usare un array statico di opzioni per la mia opzione ( 'fonte') per le prestazioni. Se si è tentato che con questa soluzione, ci si accorge che le ricerche di jQuery su tutta l'etichetta troppo.

Ad esempio, se avete fornito:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

Poi, digitando "span" sarebbe partita entrambi i risultati, per farlo per la ricerca sul valore ignorare solo la funzione $.ui.autocomplete.filter:

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

È possibile modificare l'ultimo parametro c.value per tutto quello che vuoi, per esempio c.id || c.label || c.value permetterebbe di cercare in etichetta, il valore, o l'id.

È in grado di fornire il maggior numero / valori chiave di parametro sorgente di completamento automatico come si desidera.

PS:. Il parametro originale è c.label||c.value||c

Answer 5

ho avuto il problema di cui parla Clarence. Avevo bisogno di fornire HTML per fare un aspetto piacevole con gli stili e le immagini. Ciò ha provocato digitando "div" corrispondenza di tutti gli elementi.

Tuttavia, il mio valore era soltanto un numero di identificazione, quindi non ho potuto permettere la ricerca di tirare su proprio questo. Avevo bisogno di ricerca per cercare più valori, non solo il numero ID.

La mia soluzione era quella di aggiungere un nuovo campo che ha tenuto solo i valori di ricerca e controllare che nel file di jQuery UI. Questo è quello che ho fatto:

(Resta jQuery UI 1.9.2,., Può essere lo stesso su altri)

Modifica funzione di filtro on line 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);
        });
    }

ho aggiunto l'assegno per il campo "value.searchonly". Se è lì, si utilizza solo quel campo. Se non è lì, funziona come normale.

Quindi si utilizza il completamento automatico esattamente come prima, tranne che è possibile aggiungere il tasto "searchonly" al tuo oggetto JSON.

Mi auguro che aiuta qualcuno!