plugin - jQuery Tokeninput con funcionalidad "Combobox"?

tags plugin jquery

Question

Estoy usando el complemento Loopj Tokeninput y me gustaría saber si alguien ha implementado la funcionalidad jQuery "combobox" en él. ¿o algo similar? El alcance es permitir la visualización de todos los datos de una fuente local haciendo clic en una "flecha hacia abajo" o simplemente haciendo clic en el campo de entrada como si fuera un menú desplegable (pero permitiendo reducirlo al escribir algo ...). Si es así, ¿alguien podría compartir cómo implementarlo?

Answer 1

Chosen es exactamente lo que necesitas.

Elegido es un complemento de JavaScript que hace que los cuadros de selección largos y poco manejables sean mucho más fáciles de usar. Actualmente está disponible en ambos sabores jQuery y Prototype.

Answer 2

Oye, no hay un método predefinido para hacerlo en el complemento de tokeninput. Sin embargo, podemos modificar el plugin para lograr lo que necesita. Hice algunas modificaciones al plugin. Haga el mismo cambio en su archivo jquery.tokenput.js y vea si funciona. Abra el archivo js. Busque

var input_box

Ahora pasa a .focus (function () {}) parte de él y sustitúyelo por esto.

if (settings.tokenLimit === null || settings.tokenLimit !== token_count) {
if (settings.local_data) {
setTimeout(function() { run_search(''''); }, 5);
} else {
show_dropdown_hint();
}

Busque la función run_search (query) . ve a else si parte de la función y reemplázala por debajo de uno.

else if (settings.local_data) {
// Do the search through local data
var results ;
if(query==''''){
results= settings.local_data;
}
else{
results= $.grep(settings.local_data, function(row) {
return (row[settings.propertyToSearch].toLowerCase().indexOf(query.toLowerCase()) == 0 || row[settings.propertyToSearch].toLowerCase().indexOf('' '' + query.toLowerCase()) > -1);
});
}

Estamos utilizando el enfoque de ese cuadro de entrada para devolver toda la lista cuando el recuadro está enfocado y la consulta está vacía. Si la consulta no está vacía, buscará esa consulta.

Además, si desea mostrar una barra de desplazamiento en el cuadro de resultados de búsqueda, debe modificar el css de "div.token-input-dropdown" en el archivo token-input.css de la siguiente manera: - Eliminar o comentar: "desbordamiento: oculto" ; " - Agregar: "altura máxima: 150 px;" (o la altura máxima que desee que tenga la caja) - Agregar: "desbordamiento: automático;"