Utilizzo di HTML in jQuery UI completamento automatico

Question

Prima di jQuery UI 1.8.4 Potrei usare HTML nell'array JSON che ho creato per funzionare 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 nel menu a discesa.

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

Come posso ottenere che HTML venga visualizzato nel suggerimento?

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> 

mio serie JSON include HTML come il seguente:

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

Answer 1

aggiungere 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 utilizzare .data("autocomplete")" invece di .data("ui-autocomplete")

Answer 2

ho avuto lo stesso problema, ma io preferisco usare un array statico di opzioni per la mia opzione ('fonte') per le prestazioni. Se lo hai provato con questa soluzione, scoprirai che jQuery esegue ricerche anche sull'intera etichetta.

EG se 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 a qualsiasi cosa desideri, ad es c.id || c.label || c.value consentirebbe di cercare su etichetta, valore o l'id.

È possibile fornire il maggior numero di chiavi/valori per il parametro di origine del completamento automatico desiderato.

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

Answer 3

Ho avuto il problema menzionato da Clarence. Avevo bisogno di fornire HTML per fare un bell'aspetto con stili e immagini. Ciò ha comportato la digitazione di "div" corrispondente a tutti gli elementi.

Tuttavia, il mio valore era solo un numero ID, quindi non potevo consentire alla ricerca di eseguire proprio questo. Avevo bisogno della ricerca per cercare diversi valori, non solo il numero ID.

La mia soluzione era quella di aggiungere un nuovo campo che contenesse solo i valori di ricerca e controllare quello nel file dell'interfaccia utente jQuery. Questo è quello che ho fatto:

(Questo è su 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 il controllo per il campo "value.searchonly". Se è lì, usa solo quel campo. Se non è lì, funziona normalmente.

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

Spero che questo aiuti qualcuno!

Answer 4

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

Il trucco è:

1. Use this jQuery UI extension
2. Poi nel completamento automatico passaggio opzione autocomplete({ html:true});
3. Ora si può passare html <div>sample</div> nel campo "etichetta" dell'output JSON per il completamento automatico.

Se non sai 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 completamento automatico jquery-ui nella tua pagina html (o il file jquery-ui js). Aggiungi questo script plugin dopo il file javascript di completamento automatico.

Answer 5

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

originale:

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

fisso:

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