html - color - tooltip javascript

Uso de HTML en la autocompleta de jQuery UI

Question

Antes de jQuery UI 1.8.4, podía usar HTML en la matriz JSON que construí para que funcionara 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 here que no he tenido suerte.

¿Cómo puedo obtener HTML para que 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"}]

Answer 1

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 anteriores de jQueryUI use .data("autocomplete")" lugar de .data("ui-autocomplete")

Answer 2

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

El truco es:

1. Use 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 sabes cómo agregar el complemento a JQuery UI, 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 la secuencia de comandos 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 3

No se recomienda esta solución, pero puede simplemente editar el archivo de origen 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)},

Answer 4

Tuve el mismo problema, pero 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 suministró:

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

Luego, escribir "span" coincidiría con ambos resultados, para hacer que busque en el valor, solo anulará 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 a cualquier cosa que desee, p. Ej. c.id || c.label || c.value c.id || c.label || c.value c.id || c.label || c.value le permitiría buscar en la etiqueta, el valor o la identificación.

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

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

Answer 5

Tuve el problema mencionado por Clarence. Necesitaba proporcionar 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 identificación, por lo que no podía permitir que la búsqueda solo se ejecutara. 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 verificar eso 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 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í, usa ese campo solamente. Si no está allí, funciona normalmente.

Luego usa la función de autocompletar exactamente como antes, excepto que puede agregar la clave "searchonly" a su objeto JSON.

¡Espero que ayude a alguien!