ListBox doble con filtro de búsqueda usando jQuery

Escrito por: Martín el 23-07-2009 06:45:33 y leído 4226 veces

En la web de jQuery.com me encontré con un usuario que publicó un plugin para hacer listas dobles (es decir, el clásico: una lista con todas las opciones y los botoncitos para ´pasar´ a la otra los items que queremos), pero con una más que interesante opción de un campo de texto en la parte superior que sirve para filtrar aquellas opciones de nuestra lista según el texto ingresado.

Es más difícil explicarlo que verlo. Las características que tiene, además del potente filtro, son que pueden ´pasarse´ de una lista a otra, un elemento, muchos, muchos a la vez y lo mismo con quitarlos de la segunda lista.

Hay muchos demos en la web del autor, pero me quedo con uno, la versión cross-browser, porque, hoy día, si un código no funciona en todos los navegadores, entonces no sirve. Nunca podemos obligar a la gente a ver la web con el navegador que tú quieres que la vea.

¿Una demo?
Sí, porque como explicándome soy pésimo, mejor te dejo un link para que lo veas en funcionamiento y entenderás de qué hablo.

La implementación:
Muy fácil, sólo agregar las librerías jquery y el plugin que se descarga desde la web del autor y un poco de código html (ya no xhtml...)

Lo quiero...
Pues descárgatelo de este enlace.

Comentario:
Sería muy fácil rellenar la lista 1 (la que tiene todos los items) con contenido dinámico, simplemente debes reemplazar en el segundo código que pongo aquí abajo la parte de los ´option´ con el resultado de tu consulta a la base de datos. Y recuerda que para que se procese el envío del formulario, la segunda lista debe llamarse con nombre de Array (es decir, con [ ] al final -sin espacio en el medio-) y debes usar algún script para seleccionar todos los items como, por ejemplo, ejecutar la función del código 3 al hacer el submit.

Código XHTML

<script src="/scripts/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script src="scripts/dlbScriptCrossBrowser.js" language="javascript" type="text/javascript"></script>

Código XHTML

<table>
            <tr>
                <td>
                    <div id="box1Group">
                        Filter: <input type="text" name="filter" /><button type="button" name="clear">X</button><br />
                        <select name="view" multiple="multiple" style="height:500px;width:300px;">
                            <option value="501649">2008-2009 "Mini" Baja</option>
<option value="501497">AAPA - Asian American Psychological Association</option>

<option value="501053">Academy of Film Geeks</option>
<option value="500001">Accounting Association</option>
<option value="501227">ACLU</option>
<option value="501610">Active Minds</option>
<option value="501514">Activism with A Reel Edge (A.W.A.R.E.)</option>
<option value="501656">Adopt a Grandparent Program</option>
<option value="501050">Africa Awareness Student Organization</option>
<option value="501075">African Diasporic Cultural RC Interns</option>
<option value="501493">Agape</option>

<option value="501562">AGE-Alliance for Graduate Excellence</option>
<option value="500676">AICHE (American Inst of Chemical Engineers)</option>
<option value="501460">AIDS Sensitivity Awareness Project ASAP</option>
<option value="500004">Aikido Club</option>
<option value="500336">Akanke</option>
                        </select><br/>
                        <span class="countLabel"></span>
                        <select name="storage" class="storageBox">
                            
                        </select>

                    </div>
                </td>
                <td>
                    <button id="to2" type="button"> > </button>
                    <button id="allTo2" type="button"> >> </button>
                    <button id="allTo1" type="button"> << </button>
                    <button id="to1" type="button"> < </button>

                </td>
                <td>
                    <div id="box2Group">
                        Filter: <input type="text" name="filter" /><button type="button" name="clear">X</button><br />
                        <select name="view" multiple="multiple" style="height:500px;width:300px;"></select><br />
                        <span class="countLabel"></span>
                        <select name="storage" class="storageBox"></select>
                    </div>

                </td>
            </tr>
        </table>

Código JAVASCRIPT

// esta función es únicamente para seleccionar todos los items de la lista antes del submit. Recuerda que el botón de enviar el formulario llame a esta función con un onclick=selectAllOptions('id_del_select_2');

function selectAllOptions(selStr)
{
var selObj = document.getElementById(selStr);
for (var i=0; i<selObj.options.length; i++) {
selObj.options[i].selected = true;
}
document.nombreformulario.submit();}

Categorías: Listbox • Combobox • Jquery • •