ejemplo - Combobox de autocompletar jQuery con etiqueta de búsqueda Y descripción de la opción

jquery autocomplete combobox

Question

Me gustaría utilizar el combobox de autocompletar multirrutas de la interfaz de usuario de jQuery pero con la etiqueta y la descripción de las opciones de búsqueda. O etiqueta y valor, pero el valor tendría que ser visible para el usuario.

¿Hay alguna forma de hacerlo?

Actualización: También botón (flecha hacia abajo) para mostrar (tal vez desplazable) la lista de todas las opciones sería agradable.

Answer 1

Esto es definitivamente factible. Al adaptar la respuesta a la que se vinculó, así es como buscaría por la propiedad desc de cada elemento, así como también la propiedad de la label . Este ejemplo también incorpora un botón #showall ( #showall ) que muestra todos los elementos.

JavaScript:

$(function() {
    var projects = [ /* ... */ ];

    $("#showall").button({
        icons: {
            primary: "ui-icon-triangle-1-s"
        },
        text: false
    })
        .removeClass("ui-corner-all")
        .addClass("ui-corner-right ui-combobox-toggle")
        .on("click", function () {
            $("#project").autocomplete("search", "");
        });


    $("#project").autocomplete({
        minLength: 0,
        source: function(request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            /* Search by description or label: */
            response($.grep(projects, function(value) {
                return matcher.test(value.label || value.value || value) || 
                    matcher.test(value.desc);
            }));
        },
        focus: function(event, ui) {
            $("#project").val(ui.item.label);
            return false;
        },
        select: function(event, ui) {
            $("#project").val(ui.item.label);
            $("#project-id").val(ui.item.value);
            $("#project-description").html(ui.item.desc);
            $("#project-icon").attr("src", "images/" + ui.item.icon);

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

HTML:

<div class="ui-widget">
    <label>Your preferred programming language:</label>
    <span class="ui-combobox">
        <input id="project" type="text" class="ui-combobox-input ui-state-default ui-widget ui-widget-content ui-corner-left" /><a id="showall" tabindex="-1" title="Show All Items"></a>
    </span>
</div>​

Ejemplo: http://jsfiddle.net/J5rVP/4/

Intenta buscar "CSS" o "interfaz"