chosen.js :: ¿Alguien tiene un ejemplo real de trabajo?

Question

¿Alguien ha usado y personalizado algún código básico de choose.js?

He descargado el js, css y png, he copiado algún código de los ejemplos, he escrito mi propio ejemplo súper simple, pero me falta algo. He verificado que el código.jquery.js está incluido y se carga, lo mismo con el choose.css.

Cuando trato de mostrar incluso un campo SELECCIONAR extremadamente simple (desplegable), obtengo un campo muy pequeño, y al hacer clic en el campo no hago nada. Cuando deshabilito choose.js, simplemente obtengo el SELECT con todas las opciones que se muestran.

Así es como agrego un simple SELECT dentro de jQuery (tengo que rellenar el campo de forma dinámica, aunque en este ejemplo que todo es modificable):

$html = '<select name="items" id="items" multiple="multiple" size="1" class="chosenElement">'; 
    $html += '<option value="foo">foo</option>'; 
    $html += '<option value="bar">bar</option>'; 
    $html += '<option value="baz">baz</option>'; 
    $html += '<option value="qux">qux</option>';  
    $html += '</select>'; 

Entonces, justo cuando mostrar el cuadro de diálogo modal que contiene las opciones, que llamo:

$('.modal-body').html($html); 
$('.chosenElement').chosen(); 

hasta ahora, he modificado y probado todo tipo de permutaciones, en google para las soluciones o ejemplos, pero nada parece funcionar. Probablemente sea algo muy tonto, como un punto y coma perdido en alguna parte, pero he perdido tanto tiempo en esta "implementación de 10 minutos" que necesito pedir ayuda.

https://github.com/harvesthq/chosen

Answer 1

hay que apuntar el selecto

$('#items').chosen(); 

jsFiddle

Answer 2

Al rellenar el campo de forma dinámica, es el conjunto de resultados JSON volver w/"Texto" y "Valor" atributos? Si no lo es, Elegido no formateará los resultados correctamente dentro de su lista. De hecho, no los agregará en absoluto. Aprendí esto de la peor manera porque mis resultados inicialmente regresaban con los atributos "Nombre" e "ID" en su lugar.

Answer 3

Intente eliminar el atributo size = "1" del cuadro de selección y/o establezca un atributo de estilo con un ancho mayor. Elegido basa el ancho de los elementos generados en el ancho del cuadro de selección subyacente por lo que si su cuadro de selección es muy pequeño, la selección elegida también lo será. Espero que ayude.

Answer 4

ajustar el código jQuery en el interior: -

$(document).ready(function(){ 
    $('.chosenElement').chosen(); 
}); 

Answer 5

encontramos con un problema similar. Yo no era capaz de averiguar lo que estaba causando por mi situación en este trabajado:

$j('select').livequery(
    function(){ 
     $j(this).chosen({width: "300"}); 
     $j('.search-field input').height(14); 

    }, 
    function(){ 
     //remove event 
    }); 

Answer 6

Si realmente quiere probar el ejemplo "más básico", sugeriría:

1. el trabajo en HTML codificado (vs html añadido dinámicamente)
2. eliminar todos los atributos del elemento select
3. Sólo volver a agregar los atributos para el elemento select vez un ejemplo básico funciona muy bien.

Tenga en cuenta que el atributo multiple="multiple" en el elemento select hace que chosen.js se comportan de manera diferente.

He corrió el código aquí: http://jsfiddle.net/99Dkm/1/

y funciona muy bien.

Sospecho que el problema no es la biblioteca chosen.js, sino más bien cómo se usa (envolviendo dentro de alguna función básica de jQuery falta o más).

Observe que en mis ejemplos de trabajo en jsFiddle solo incluí chosen.css & chosen.jquery.js.

nota: obtener las direcciones URL de los archivos (JavaScript & CSS) de los http://cdnjs.com/libraries/chosen

Answer 7

La documentación de las opciones elegidas incluye:

Si su selecto se oculta cuando se crea una instancia elegida, debe especificar un ancho o la selección se mostrará con un ancho de 0.

Para evitar que aparezca un campo de ancho cero, debe usar el botón de "ancho" o asegúrate de que tu Select original esté visible cuando llames a Chosen.