Select szűrése textboxszal

Igen gyakran használt vezérlőelem a select (vagy drop down, combobox), mely nagyban megkönnyíti az értékek kiválasztását, mint pontos adatforrás. Mindez igaz addig, amíg maximum pár tíz elem közül kell választanunk, nagyobb elemszám felett bosszantó lehet a kereséssel eltöltött idő. Miért nem használunk címkéket? Csak: nem pontos, csak egy értéket közöl (a select 2 értéket közöl- value, text- és pontos értékek), és mert nem erre való. A nagyobb listákban való elemkiválasztására készítettem egy scriptet, ami már már nagyobb listaméretnél is megkönnyíti az választást.

Az elv a következő:

1. lementjük az induláskor a selectben lévő elemeket (backup)
2. feldolgozzuk a keresési kritériumot: ne számítson kereséskor a beírt szavak sorrendje
3. kiűrítjük a selectet
4. végigmegyünk a select backupján, és a kritériumnak megfelelő elemet betesszük a selectbe
5. a korábban kijelölt értékeket, amit szintén a backupban tárolunk, “átjelöljük” a selectbe (A kijelölt elemek mentése a select onclick eseményére történik.)

Műküdés közben a kód: ITT

A kód: selectfilter.js De ez sem jelent megoldást egy több 1000 soros selectre, mivel ott eleve sok idő a html betöltése, és a kliensoldali “szószűrés”. Ezt ajax-szal oldjuk majd meg.