Usando HTML en el autocompletado de jQuery UI

83

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

Pude hacer algo como:

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

Eso se mostraría como texto 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 aquí con el que no he tenido suerte.

¿Cómo puedo hacer 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 el siguiente:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]
Jason
fuente
2
También me gustaría que esto respondiera, acabo de encontrar el mismo problema.
Kieran Andrews

Respuestas:

120

Agregue esto a su código:

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

Entonces tu 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 use en .data("autocomplete")"lugar de.data("ui-autocomplete")

Kieran Andrews
fuente
¿Qué hace _renderItem? ¿Eso es convertir el HTML?
Jason
2
forum.jquery.com/topic/using-html-in-autocomplete Vea la segunda publicación, lo describe todo.
Kieran Andrews
7
En las nuevas versiones de jQuery ui use .data ("ui-autocomplete") no data ("autocomplete")
Mike Starov
1
Si quita el <a>, no podrá hacer clic / desplazarse por el elemento.
Piotr Kula
Eres un salvavidas. ¡Quiero escribir un cheque en tu respuesta! :)
Sri Harsha Kappala
10

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

El truco es:

  1. Utilice esta extensión jQuery UI
  2. Luego, en la opción de autocompletar, pase autocomplete({ html:true});
  3. Ahora puede pasar html &lt;div&gt;sample&lt;/div&gt;en el campo "etiqueta" de la salida JSON para autocompletar.

Si no sabe cómo agregar el complemento a la interfaz de usuario de JQuery, entonces:

  1. Guarde el complemento (extensión html de Scott González) en un archivo js o descargue el archivo js.
  2. Ya ha agregado el script 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 de autocompletar.
Wasiq
fuente
2

No se recomienda esta solución, pero puede editar el archivo fuente jquery.ui.autocomplete.js (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)},
revocar
fuente
0

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

Por ejemplo, si proporcionó:

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

Luego, escribir "intervalo" coincidiría con ambos resultados, para que la búsqueda del valor solo anule la $.ui.autocomplete.filterfunción:

$.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.valuea lo que desee, por ejemplo, c.id || c.label || c.valuele permitiría buscar en la etiqueta, el valor o la identificación.

Puede proporcionar tantos valores clave como desee para el parámetro de origen de autocompletar.

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

Clarence Liu
fuente
FYI: No necesita esta solución si usa AJAX como fuente porque es responsable de filtrar con el "término" de búsqueda pasado de todos modos
Clarence Liu
0

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

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

Mi solución fue agregar un nuevo campo que contenía solo 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 lo mismo en otros).

Edite la 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);
        });
    }

Agregué el cheque para el campo "value.searchonly". Si está allí, solo usa ese campo. Si no está ahí, funciona con normalidad.

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

¡Espero que ayude a alguien!

Ricketts
fuente
2
@PeterMortensen Me encantó que lo editaste para incluir un enlace de Wikipedia a HTML.
Dan Atkinson