Uso de HTML en jQuery UI autocompletar

Question

Antes de jQuery UI 1.8.4 Podría usar HTML en la matriz JSON que construí para trabajar con un autocompletar.

que era capaz de hacer algo como:

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

Eso le mostrará como texto de color rojo en el menú desplegable.

A partir de 1.8.4 eso no funciona. Encontré http://dev.jqueryui.com/ticket/5275 que me dice que use el ejemplo HTML personalizado here con el que no he tenido suerte.

¿Cómo puedo hacer para que HTML aparezca en la sugerencia?

Mi jQuery es:

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

Mi matriz JSON incluye HTML como la siguiente:

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

Answer 1

Agregar a su código:

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

lo que el código se convierte en:

<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: En versiones antiguas de jQueryUI utilizar en lugar de .data("autocomplete")".data("ui-autocomplete")

Answer 2

que tenía el mismo problema, pero yo prefiero usar una matriz estática de opciones para mi opción ('fuente') para el rendimiento. Si lo intentó con esta solución, encontrará que jQuery también busca en toda la etiqueta.

por ejemplo, si se suministra:

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

Entonces, al escribir "span" se correspondería con ambos resultados, para conseguir que buscar en el valor sólo reemplazar la función $.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)})} 

Puede editar el último parámetro c.value para cualquier cosa que desee, por ejemplo c.id || c.label || c.value le permite buscar en la etiqueta, el valor o la identificación.

Puede suministrar tantas claves/valores para el parámetro de fuente de autocompletar como desee.

PD: el parámetro original es c.label||c.value||c.

Answer 3

Tuve el problema mencionado por Clarence. Necesitaba suministrar HTML para hacer una buena apariencia con estilos e imágenes. Esto resultó en tipear "div" haciendo coincidir todos los elementos.

Sin embargo, mi valor era solo un número de ID, por lo que no podía permitir que la búsqueda se ejecutara solo con eso. Necesitaba la búsqueda para buscar varios valores, no solo el número de ID.

Mi solución fue agregar un nuevo campo que solo contenía los valores de búsqueda y verificarlo en el archivo jQuery UI. Esto es lo que hice:

(Esto está en jQuery UI 1.9.2; puede ser el mismo en otros)

Editar función de filtro en la línea 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); 
     }); 
    } 

I añade el cheque por el campo "value.searchonly". Si está allí, usa ese campo solamente. Si no está allí, funciona normalmente.

Luego utiliza el autocompletar exactamente como antes, excepto que puede agregar la clave "searchonly" a su objeto JSON.

Espero que ayude a alguien!

Answer 4

Esto también se documenta en la documentación de autocompletar jquery-ui en: http://api.jqueryui.com/autocomplete/#option-source

El truco es:

1. Use this jQuery UI extension
2. Luego, en pase opción de autocompletar autocomplete({ html:true});
3. Ahora usted puede pasar html <div>sample</div> en el campo "etiqueta" de la salida JSON para autocompletar.

Si usted no sabe cómo agregar el plugin para jQuery UI a continuación:

1. Guardar el plugin (Scott González extensión html) en un archivo js o descargar el archivo js.
2. Ya ha agregado la secuencia de comandos de autocompletar jquery-ui en su página html (o el archivo jquery-ui js). Agregue este script de complemento después de ese archivo Javascript autocompletado.

Answer 5

No se recomienda esta solución, pero que sólo puede editar jquery.ui.autocomplete.js archivo fuente (v1.10.4)

original:

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

fijo:

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