# Használat

> Kereshető legördülő lista létrehozása lépésről lépésre, és ahogy a látogató a frontenden látja.

## Kereshető lista létrehozása

Példa: egy szállítási űrlap **Város** mezője, amelyben a látogató gépeléssel keres a városok között.

1. Nyisd meg az űrlapot: **JetFormBuilder → Forms**, majd az űrlap címére kattintva. Új űrlaphoz használd az **Add New Form** menüpontot.
2. Kattints a bal felső sarokban a **+** gombra, a keresőbe írd be: „Select Field”, és húzd a blokkot az űrlap kívánt helyére.
3. Add meg a mező címkéjét (**Field label**) és nevét (**Form field name**), majd vedd fel a lehetőségeket a **Manage items** gombbal, vagy válassz másik forrást a **Fill options from** listából.
4. Kapcsold be a **Use Autocomplete** kapcsolót.
5. Ha a lehetőségeket kereséskor szeretnéd lekérni a szerverről, kapcsold be a **Loading via AJAX** kapcsolót is.
6. A **Minimum input length** mezőben add meg, hány karaktertől induljon a keresés (például `1`).
7. Szükség esetén nyisd ki a jobb oldali **Autocomplete translations** szakaszt, kapcsold be az **Enable custom messages** kapcsolót, és írd át a feliratokat.
8. Kattints a **Mentés** gombra.
9. Add az űrlapot egy oldalhoz a **JetForm** blokkal (az űrlap kiválasztásával).

## Mit lát a látogató

Az űrlap a megszokott módon jelenik meg, a mező egy szokásos lenyíló listának látszik.

![Az űrlap a frontenden a keresés előtt](./kepek/urlap-frontend.webp)

*Az űrlap a frontenden a keresés előtt* (https://minta-bolt.hu/szallitasi-adatok/)

Kattintás után a lista tetején keresőmező nyílik. A begépelt szöveg szerint a lista azonnal szűkül:

![A „sz” szövegre szűkült lista a frontenden](./kepek/urlap-kereses.webp)

*A „sz” szövegre szűkült lista a frontenden* (https://minta-bolt.hu/szallitasi-adatok/)

Ha a begépelt szövegre nincs találat, a **NO RESULTS** mezőben megadott üzenet látszik, ha a szöveg a minimumnál rövidebb, az **INPUT TOO SHORT** üzenete.

## Tippek

- A **Minimum input length** nagy listáknál és AJAX-os betöltésnél csökkenti a fölösleges kéréseket.
- AJAX-os betöltésnél ne számíts előre kitöltött (preset) vagy alapértelmezett értékre: ilyenkor a mező üresen indul.
- A kiegészítés csak a **Select Field** blokkon érhető el, más mezőtípuson nem.
- A keresőmező üzeneteit az **Autocomplete translations** panelen magyarra is átírhatod.