martes, 20 de diciembre de 2011

Filtrar contenido de un combobox (dropdown list) con jquery

Hace poco me encontre con este problema.

Tenia una lista de unos 6000 elementos y necesitaba que los usuario pudieran buscar rapidamente el elemento que necesitaban seleciionar.

Lo primero que pensé hacer fue usar la opción de combobox del autocomplete de Jquery UI sin muy buenos resultados. No sé que hice mal pero no me renderizaba la lista  ni siquiera pude hacer funcionar el ejemplo. asi que decidí tomar un poco de tiempo y hacer un scirpt para esto. El resultado fue más o menos el siguiente:
 <input type="text" id="input"> </input>
 <select name="datoaenviar" id="RemisionEquipoId">
<option value=""></option>
</select>
<select name="datosreferencia" class="hidden" id="RemisionEquipos">
<option value="1">Dato 1</option>
 <option value="2">otro dato</option>
<option value="3">un dato mas</option>
<option value="n">y asi sucesivamente</option>
</select>
  $("#input").bind('keyup', function(){
        $("#RemisionEquipoId").empty();
        var palabra = $(this).val().toUpperCase();
        $("#RemisionEquipos option")
        .filter(function(index){
            return $(this).text().toUpperCase().indexOf(palabra) >= 0 ;
        }).show()
        .clone()
        .appendTo('#RemisionEquipoId');
     
        $('#RemisionEquiposId option:eq(0)').attr("selected", "selected");
    });
El select "datosreferencia" está oculto y contiene todos los datos a filtrar. A medida que en "input" se escribe se van seleccionando los "options" que contengan el texto que se escribe en "input". Cada vez que se presiona una tecla se vacian los datos del select "datosenviar" y se agregan los que cumplan con el criterio.

No es una solución muy elegante pero es sencilla y eficaz.