autocompletion, fejlesztés, hogyan

Mint felhasználó szeretem a kényelmesen használható megoldásokat. Mint fejlesztő szeretek kompakt, kézreálló dolgokat létrehozni. Az egyik visszatérő problémám az, hogy hogyan oldjak meg egy helyen egy lenyíló menüt ami felkínálja az eddig rögzített változatokat és ugyanott valahogyan lehetőség nyíljon új elemeket is felvinni. Na erre most feltaláltam a spanyolviaszt.

A probléma

A selectek csúnyák, büdösek és rossz a PH értékük. E mellett bizonyos elemszám felett nagyon nehézkes a kezelésük. Az input mezők kényelmesek ugyan, de nem biztosítják az egységességet. (Láttatok már olyan blogot ahol ugyanaz a címke szerepelt kisbetűvel, nagy kezdőbetűvel és elgépelve?) E kettő előnyeinek ötvözésére jöttek létre az autocomplete inputok, amelyeknél a user elkezdi gépelni amit gondol és az input alatt megjelenik egy kis lista a kiválasztható elemekkel. Gyors, egyszerű és kompakt. A probléma vele csupán az, hogy alap esetben kiiktatja az input eredeti funkcióját, mármint azt, hogy azt írjunk bele amit csak akarunk.

A háttér

Az autocomplete inputok általában a következő minta szerint működnek:

• a user beír pár betűt,
• a háttérben elindul egy ajax lekérés,
• a szerver visszaküldi a találatokat,
• a találatok megjelennek az input mező alatt,
• a user kiválaszt egyet
• a háttérben beállítódik egy azonosító (pl adatbázis id) amely a form elküldésekor beazonosítja, hogy melyik elemet is választottuk ki a listából – ez ugye sok szempontból hatékonyabb megoldás mintha a formmal a kiválasztott elem szövegét küldenénk vissza a szervernek

A megoldás

És most jön a spanyolviasz! Ha a user egy új elemet akar létrehozni, akkor ugye nem fogja egyik felkínált már létező elemet sem kiválasztani. Ennek örömére az utolsó lépés, azaz az azonosító beállítása nem történik meg. Vagyis ha a szerver nem kap azonosítót csak az input szövegét, akkor tudjuk, hogy egy új elemet hozott létre (vagy kikapcsolta a javascriptet, vagy gyorsabban gépelt mint ahogy az autocompleter létrejött volna). Vagyis némi ellenőrzés után a szerveren létrehozzuk az új elemet és már örülhetünk is.
Pontos kódokat most nem írok, szerintem ez alapján más minden ügyes kisdobos elkészítheti magának. Jó éjszakát kispajtások!

Mi az az RSS és mi az a PayPal?

Ez a bejegyzés rrd billentyűzetéből potyogott ki 2010 november 4. napján 21:05:20-kor. Eddig 1,967 olvasást ért meg. A visszajelzéseket nyomonkövetheted ezzel az RSS feed-el. Véleményt nyilváníthatsz, vagy trackbackolhatsz a saját oldaladon.