El uso de HTML en jQuery UI autocompletar

Question

jQuery UI 1.8.4 podría utilizar HTML en la matriz JSON he construido para trabajar con un autocompletar.

Yo era capaz de hacer algo como:

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

Eso se presentaba como texto de color rojo en la caída hacia abajo.

A partir de 1.8.4 que no funciona. He encontrado http://dev.jqueryui.com/ticket/5275 el cual me indica que utilice el HTML personalizado ejemplo aquí que he tenido suerte con.

¿Cómo puedo ir sobre conseguir HTML para mostrar 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>

array Mi JSON incluye HTML como la siguiente:

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

Answer 1

Añadir 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 );
        };

Así que su 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 uso .data("autocomplete")" en lugar de .data("ui-autocomplete")

Answer 2

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. utilizar esta extensión jQuery UI
2. Luego, en función de autocompletar autocomplete({ html:true}); pase opción
3. Ahora usted puede pasar html <div>sample</div> en el campo "etiqueta" de la salida de 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 añadido el original autocompletar jquery-ui en su página HTML (o archivo de la JS jquery-ui). Añadir este script plug-in después de ese archivo de autocompletar Javascript.

Answer 3

No se recomienda esta solución, pero que sólo puede editar archivos 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)},

Answer 4

Yo tenía el mismo problema, pero yo prefiero usar una matriz estática de opciones para mi opción ( 'fuente') para el rendimiento. Si se trató de que con esta solución, se encuentra que las búsquedas de jQuery en toda la etiqueta también.

Por ejemplo, si usted suministró:

[{"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 c.value parámetro para cualquier cosa que desee, por ejemplo, c.id || c.label || c.value sería permitirá buscar en la etiqueta, el valor o el id.

Se puede suministrar la mayor cantidad de claves / valores de parámetro de origen de autocompletar como desee.

PS:. El parámetro original es c.label||c.value||c

Answer 5

Yo tenía el problema mencionado por Clarence. Que necesitaba para suministrar HTML para hacer una apariencia agradable con estilos e imágenes. Esto dio lugar a escribir "div" búsqueda de todos los elementos.

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

Mi solución fue la de añadir un nuevo campo que contenía sólo los valores de búsqueda y compruebe que en el archivo de jQuery UI. Esto es lo que hice:

(esto es en jQuery UI 1.9.2;. Que 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);
        });
    }

He añadido la verificación del campo "value.searchonly". Si está allí, que sólo utiliza ese campo. Si no está allí, funciona con normalidad.

A continuación, se utiliza la función de autocompletar exactamente igual que antes, excepto que usted puede agregar la clave "searchonly" a su objeto JSON.

Espero que ayude a alguien!