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"