Czasami na stronach internetowych możemy zobaczyć całkiem ciekawy element, często nazywany comboboxem. Czym on tak naprawdę jest? W skrócie jesteśmy w stanie określić coś takiego jako pole tekstowe, do którego wpisujemy własną wartość, ale też mamy opcję wybrania jej z listy, która od razu się pojawia. Czasami też możemy dodawać nowe pozycje oraz filtrować na bierząco przez wpisywanie liter, które zawierają konkretne elementy.
Ostatnio dostałem za zadanie stworzenie czegoś podobnego i przy okazji trafiłem na bardzo przyjemną bibliotekę realizującą te zadanie. Właśnie nią chciałbym się dziś z Tobą podzielić. :)
O czym tak naprawdę mówię?
Dokładnie chodzi o Selectize.js. Oczywiście tego typu bibliotek jest całkiem sporo, dlatego polecam Ci, aby samemu znaleźć coś dla siebie, ale ja najprawdopodobniej zostanę przy tej, bo używałem i działa naprawdę przyjemnie.
Na co nam to pozwala?
W skrócie sprowadza się do 2 typów coboboxów. Pierwszy jest klasycznym polem tekstowym z listą wyboru poniżej. Drugi z kolei to coś co jest bardzo często używane chociażby w wybieraniu tagów artykułów, filmów itp. W praktyce chodzi o to, że możemy wybrać kilka opcji i wszystkie znajdą się w tym samym polu tekstowym po przecinku. Chodzi o dokładnie ten przykład.
W takim razie jak możemy tego używać?
Przygotowałem 2 przykłady, z których najprawdopodobniej najczęściej wszyscy będziemy korzystać:
Lista wyboru:
Jak widać od strony HTMLa mamy do czynienia ze standardową listą wyboru, która stała się comboboxem po tym jak użyliśmy na niej omawianego pluginu.
Warto jeszcze zatrzymać się przy parametrach wpisanych w JavaScript. Pierwszy oczywiście pozawala nam na tworzenie kolejnych pozycji listy, drugi z kolei odpowiada za zmianę napisu w polu dodawania (gdy wpisujemy słowo, które nie zostaje znalezione na liście, to pod polem tekstowym domyślnie widzimy Add: [wpisana fraza]...). Dzięki temu parametrowi Add zostaje zamienione na Dodaj.
Więcej o opcjach dostępnych dla każdego z comboboxów możecie poczytać oczywiście w dokumentacji udostępnionej przez twórcę dodatku.
Pole z tagami do wyboru:
Widzimy, że HTML tego przykładu oraz poprzedniego są inne. Tutaj mamy do czynienia z polem tekstowym, a elementów listy wyboru tym razem nie możemy umieścić w tagach <option></option>, a robimy to w kodzie JavaScript. Poza tym w parametrze delimiter oczywiście znajduje się znak, który rozdziela nasze tagi (w tym przypadku przecinek).
Tak jak już wspomniałem przy okazji zwykłej listy te parametry są tylko przykładowe i dość podstawowe, ale wydaje mi się, że dobrze oddają naturę działania tego dodatku. Poza gamą opcji, którą już linkowałem polecam sprawdzić przykłady przygotowane przez twórcę dodatku i dostępne jako demo lub na GitHubie, bo dopiero one są w stanie prawdziwie zarysować możliwości tego narzędzia.
Podsumowanie
Tak oto prezentuje się nasza biblioteka, jak widać posiada trochę opcji i mam nadzieję, że przyda Ci się przy okazji kolejnych projektów oraz ułatwi użytkownikom korzystanie z Twoich formularzy!
