Výběr konkrétní položky ze seznamu může být obtížný, zvláště pokud seznam obsahuje mnoho položek. Vyhledávání v seznamu však může tento úkol značně usnadnit. V HTML existuje způsob, jak vytvořit pole výběru s vyhledáváním, které uživateli umožní okamžitě najít požadované položky.
Metoda, která umožňuje přidat vyhledávací pole k položce select jmenuje se select2. Chcete-li začít, musíte připojit knihovnu select2 přidáním odkazu na její soubory do sekce head vašeho HTML dokumentu. Můžete použít připravené soubory knihovny nebo použít odkazy na CDN.
Po připojení knihovny k prvku select je třeba přidat třídu CSS, aby ji mohl select2 zpracovat. K tomu slouží atribut class. Poté je třeba přidat následující JavaScript kód:
Co je pole výběru s vyhledáváním
Když uživatel klikne na pole výběru s vyhledáváním, otevře se rozevírací seznam, který zobrazuje možné možnosti výběru. Když zadáte text do vyhledávacího pole, seznam se automaticky filtruje a zobrazí se pouze možnosti, které obsahují zadaný text.
Pole výběru s vyhledáváním usnadňuje uživateli výběr z velkého množství možných hodnot, protože může rychle najít požadovanou položku tím, že začne psát její název nebo část názvu do vyhledávacího pole. To je zvláště užitečné, když seznam výběru obsahuje mnoho položek nebo když potřebujete najít položku podle složitého kritéria, jako je datum nebo číslo.
Taková pole výběru s vyhledáváním jsou široce používána webovými vývojáři ke zlepšení použitelnosti formulářů na webových stránkách. Pomáhají snižovat počet chyb při výběru hodnoty, urychlují proces výběru a zlepšují uživatelskou zkušenost s interakcí s webovou stránkou.
Proč si vybrat pole s vyhledáváním
Pole výběru s vyhledáváním je obvykle kombinovaná položka složená z rozevíracího seznamu a textového pole, do kterého může uživatel zadat text, aby našel požadovanou možnost. Při zadávání textu do vyhledávacího pole se seznam možností filtruje a zobrazuje pouze ty, které odpovídají zadanému textu. To umožňuje uživateli rychle najít požadovanou možnost, i když seznam obsahuje stovky nebo tisíce možností.
| Výhody pole výběru s vyhledáváním: |
|---|
| 1. Úspora času a úsilí pro uživatele - není třeba procházet dlouhý seznam. |
| 2. Použitelnost-uživatel může pomocí vyhledávání rychle najít požadovanou možnost. |
| 3. Zlepšení vizuálního zobrazení tvaru - pole výběru s vyhledáváním lze vhodně stylizovat a upoutat pozornost uživatelů. |
| 4. Všestrannost-vyhledávací pole lze použít v různých kontextech a typech webových formulářů. |
Jak funguje pole výběru s vyhledáváním
Když uživatel začne zadávat text do vyhledávacího pole, JavaScript se spustí a začne filtrovat seznam možností v reálném čase. Skrývá všechny možnosti kromě těch, které obsahují klíčové slovo zadané uživatelem. Uživatel si může vybrat možnost kliknutím myší nebo procházením seznamu pomocí klávesnice.
K vytvoření takového pole výběru s vyhledáváním lze použít různá rozšíření JavaScriptu nebo knihovny, jako je Select2, Chosen nebo Bootstrap Select. Poskytují hotová řešení, která lze snadno přizpůsobit a použít ve svých projektech.
Je důležité poznamenat , že pole výběru s vyhledáváním je k dispozici nejen pro standardní prvek HTML, ale také pro další prvky, jako je nebo . Díky tomu je flexibilnější a umožňuje jeho aplikaci v různých scénářích a přizpůsobení jeho vzhledu a chování.
Jak vytvořit pole výběru s vyhledáváním v HTML
Weboví vývojáři mají možnost vytvořit pole výběru s vyhledáváním v HTML pomocí položky v kombinaci s určitým JavaScriptem a CSS. To může být užitečné, když je k dispozici velké množství možností výběru nebo když uživatel potřebuje snadno a rychle najít konkrétní možnost.
-
Vytvořte strukturu HTML pro své pole výběru:
.search-select-wrapper #search-input #select-field
document.getElementById('search-input').addEventListener('input', function() -1) else >>);
Nyní byste měli mít pole výběru s vyhledáváním ve vaší formě HTML. Když uživatel zadá text do vyhledávacího pole, možnosti výběru, které odpovídají zadanému textu, zůstávají viditelné a zbytek se skrývá.
Přidání stylingu
Aby pole výběru s vyhledáváním vypadalo atraktivnější a odpovídalo celkovému stylu stránky, můžete přidat styling.
K tomu lze použít CSS. Například nastavit barvu pozadí, písmo a velikost textu a přidat ohraničení a zaoblit rohy pole výběru.
Níže je uveden příklad CSS kódu, který lze přidat do stylu vaší stránky:
.custom-select
Tady používáme třídu."custom-select " pro přidání stylizace pole výběru.
Chcete-li použít stylizaci do pole výběru s vyhledáváním, jednoduše přidejte tuto třídu k příslušnému prvku:
.
Nyní by vaše pole výběru s vyhledáváním mělo vypadat atraktivnější a zapadat do celkového stylu vaší stránky.
Použití JavaScriptu k vyhledávání a filtrování
Nejprve je třeba přidat HTML prvky pro vyhledávání. Můžete vytvořit textové pole pro zadání vyhledávacího dotazu a tabulku pro zobrazení filtrovaných výsledků. Všimněte si , že tabulka obsahuje prvky thead, tbody a tr pro strukturování dat.
Níže je uveden příklad kódu HTML a JavaScript, který demonstruje použití JavaScriptu k vyhledávání a filtrování:
Название Описание
let input = document.getElementById('searchInput');let table = document.getElementById('table');input.addEventListener('input', function()