Autocomplete és új elemek

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!

5 thoughts on “Autocomplete és új elemek

  1. Miért hatékonyabb id-t küldeni?
    Lehet dobálni a köveket, de én nemszoktam idkkel vacakolni, mindig a teljes szöveget küldöm el.
    Mi több, egy unique key-el, és egy ON DUPLICATE KEY-el letudom a duplikációk ellenőrzését is.

    • @Tolnaiz kisebb lesz az adatcsomag és a szerver oldalon nem kell sokat vackolni vele elég azt nézni, hogy szám érkezett-e. De persze működőképes a te verziód is.

  2. Hát ennek a bejegyzésnek így sok értelme nincs…
    Szerintem már mindenki látott autocomplete inputot. Aki meg akar csinálni az idáig szerintem bőven eljutott. A kivitelezés az ami a kemény dolog, azoknak akik nem vágják a js-t esetleg a jquery-t meg az ilyeneket. Ezekről meg itt egy szó sincs.
    Am király az oldal. Építő jellegűnek szánnám a kritikát, mert rendszeres olvasó vagyok.

  3. az id-kel az a baj, hogy ha az ajax lekérés és a form elküldése közben törlésre, vagy megváltoztatásra kerül az a listaelem, akkor lehet szívni vele. Esetleg át lehetne adni a form elküldésekor az id-t is és a szöveget is, és ha nincs meg stimmel adatbázisban id alapján, akkor lehet a szöveggel szórakozni még 🙂

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.