Usando HTML en el autocompletado de jQuery UI

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"}]

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

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 <div>sample</div>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.

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)},

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.

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!