javascript - example - jQuery Chosen plugin sin campo de búsqueda
chosen select bootstrap (12)
No estoy seguro de si esto se ha cubierto en alguna parte, pero no pude encontrarlo en la documentación, y me preguntaba si sería posible no incluir el cuadro de entrada de búsqueda con el complemento jQuery elegido (utilizado para seleccionar entradas de estilo). Específicamente, me gustaría utilizar el estándar de seleccionar uno sin él.
Use este código para deshabilitarlo:
jQuery(''select'').chosen( {disable_search: true} );
y no te olvides de ocultarlo, de lo contrario, seguirá funcionando en el móvil.
.chzn-search{display: none}
Bueno, probé con la documentación y no tuve suerte, así que finalmente arreglé esto
$ (''. chzn-search''). hide ();
Hago lo anterior después de llamar a elegido. Espero que esto ayude
$(".chzn-select").chosen({disable_search_threshold: 3});
Si el número de elemento de la selección es menor que disable_search_threshold (aquí 2 y menos), el cuadro de búsqueda no se mostrará.
Agrego una clase a mi hoja de estilos.
.chzn-select { display: none }
Alternativamente, para elementos individuales, especifico el elemento y _chzn
para _chzn
.
#element_chzn .chzn-select { display: none; }
Tenga en cuenta que: elegido convertirá los guiones en las identificaciones de los elementos y en las clases para subrayar, por lo que debe seleccionar el element-id
que necesita.
#element_id_chzn .chzn-select { display: none; }
Solo un seguimiento rápido: noté que en la función
AbstractChosen.prototype.set_default_values
se lee una variable de
this.options.disable_search
Entonces puede deshabilitar el campo de búsqueda con
jQuery(''select'').chosen( {disable_search: true} );
sin usar un umbral de número fijo.
Con la última versión de elegidos, solo eso funciona para mí:
$(''ul.chosen-choices li.search-field'').hide();
La opción disable_search_threshold
oculta el cuadro de búsqueda para los menús desplegables de selección única. El número pasado especifica cuántos elementos desea permitir antes de mostrar el cuadro de búsqueda. Si no desea el cuadro de búsqueda, simplemente configúrelo en un número más alto que la cantidad de elementos que siempre contendrá.
$(''#myDropDown'').chosen({ disable_search_threshold: 10 });
Utilicé jQuery (''select''). Selected ({disable_search: true}); pero en el generador de perfiles de Chrome, el método search_field_scale se llamó de todos modos y consumió gran parte del rendimiento.
Así que elimino el método y todas las llamadas a él y lo reemplazo por this.search_field.css ({''width'': ''100%''}) en show_search_field_default y reemplazo style = 25px por style: 100% y que this.search_field.css ({''ancho'': ''23px''}); result_select debido al "marcador de posición de datos"
trabajando bien para mi
disable_search:true,
Dado que ninguno de los ajustes elegidos para ocultar el campo de búsqueda para selecciones múltiples parecía estar funcionando, pirateé el .jquery.js elegido en la línea 577 para:
<li class="search-field"><span class="placeholder">'' + this.default_text + ''</span></li>
(Span en lugar del campo de entrada). Necesitó comentar esta línea, también
this.search_field[0].disabled = false;
Funciona bien para mí, a pesar de que no es la mejor práctica para hackear el código.
$(''select'').chosen( {disable_search: true} );
Las versiones más recientes de jquery elegidas le dan la opción de deshabilitar la entrada de búsqueda con el menú desplegable.
$(".chzn-select").chosen({
disable_search: true
});
Las versiones anteriores no son compatibles con esta opción. De alguna forma, si no está estrictamente permitido usar una versión más nueva de la que puede usar
$(".chzn-select").chosen({
disable_search_threshold: 5
});
ocultará el cuadro de búsqueda si los resultados son inferiores a 5, es mejor utilizarlos con los menús desplegables de género. Hay otra manera de arreglar esto y eso es;
$(".chzn-select").chosen();
$(".chzn-select").hide();
Llame a hide inmediatamente después de la inicialización, ¡no sé por qué funciona este truco, pero está haciendo lo que quiere!
Le sugiero que use la última versión para que tenga acceso a las últimas opciones.
¡Espero que funcione para ti!