Vytvoření vlastního vyhledávacího pole automatického doplňování je jednodušší, než si myslíte.
Vyhledávací panel je oblíbený prvek uživatelského rozhraní, který využívá mnoho moderních webových stránek. Pokud vytváříte web, který obsahuje jakýkoli typ dat, možná budete chtít, aby vaši uživatelé mohli vyhledávat konkrétní položky.
Existuje mnoho způsobů, jak vytvořit vyhledávací panel. Můžete vytvářet složité vyhledávací panely, které vracejí výsledky na základě více filtrů, jako je název nebo datum. Stávající knihovny vám mohou pomoci implementovat vyhledávací panel, aniž byste jej museli budovat od začátku.
Můžete však také vytvořit jednoduchý vyhledávací panel pomocí vanilkového JavaScriptu, který porovnává vstup uživatele se seznamem řetězců.
Jak přidat uživatelské rozhraní pro vyhledávací panel
Vaše webová stránka by měla obsahovat vstupní pole, do kterého uživatelé zadají text, který chtějí vyhledat. Jedním ze způsobů, jak toho dosáhnout, je použít vstupní značku a upravit ji tak, aby vypadala jako vyhledávací panel.
- Vytvořte složku pro uložení vašeho webu. Uvnitř složky vytvořte soubor HTML s názvem index.html.
- Naplňte svůj soubor základní strukturou dokumentu HTML. Pokud nejste obeznámeni s HTML, existuje mnoho Příklady HTML kódu, které se můžete naučit které vám pomohou dostat se do tempa.
<!doctype html>
<html jazyk="en-US">
<hlava>
<titul>Vyhledávací panel</title>
</head>
<tělo>
<třída div="kontejner">
<!-- Obsah webové stránky je zde-->
</div>
</body>
</html> - Do prvku div třídy kontejneru přidejte vstupní značku. To umožní uživateli zadat text, který by chtěl vyhledat. Kdykoli zadají nový znak, váš web zavolá funkci search(). Tuto funkci vytvoříte v pozdějších krocích.
Atribut autocomplete zajišťuje, že prohlížeč nepřidá vlastní rozevírací seznam na základě předchozích vyhledávacích dotazů.<třída div="kontejner">
<h2>Hledat země</h2>
<vstupní id="vyhledávací panel" automatické doplňování="vypnuto" onkeyup="Vyhledávání()" typ="text"
jméno="Vyhledávání" zástupný symbol="Co hledáš?">
</div> - Ve stejné složce jako vaše index.html vytvořte nový soubor CSS s názvem styly.css.
- Vyplňte soubor stylem pro celkovou webovou stránku a vyhledávací panel:
tělo {
okraj: 0;
výplň: 0;
barva pozadí: #f7f7f7;
}
* {
rodina písem: "Arial", bezpatkové;
}
.kontejner {
odsazení: 100px 25%;
displej: flex;
směr ohybu: sloupec;
výška čáry: 2rem;
velikost písma: 10,2 em;
barva: #202C39;
}
#searchbar {
odsazení: 15px;
border-radius: 5px;
}
vstup[type=text] {
-webkit-transition: šířka 00,15 seasy-in-out;
přechod: šířka 00,15 seasy-in-out;
} - v index.html, přidejte odkaz na svůj soubor CSS do značky head a pod značku title:
<odkaz rel="šablona stylů" href="styly.css"> - Otevři index.html soubor ve webovém prohlížeči a zobrazte uživatelské rozhraní vašeho vyhledávacího panelu.
Jak vytvořit řetězce seznamu pro vyhledávací panel
Než bude uživatel moci vyhledávat, budete muset vytvořit seznam dostupných položek, které může hledat. Můžete to udělat s polem řetězců. Řetězec je jedním z mnoha datové typy, které můžete použít v JavaScriptu, a může představovat sekvenci znaků.
Tento seznam můžete dynamicky vytvořit pomocí JavaScriptu, jak se stránka načítá.
- Uvnitř index.html, pod vstupní značku přidejte div. Tento div zobrazí rozevírací seznam, který bude obsahovat seznam položek, které odpovídají tomu, co uživatel hledá:
<div id="seznam"></div> - Ve stejné složce jako vaše index.html soubor a styly.css soubor, vytvořte nový soubor s názvem script.js.
- Uvnitř script.js, vytvořte novou funkci nazvanou loadSearchData(). Uvnitř funkce inicializujte pole se seznamem řetězců. Mějte na paměti, že se jedná o malý statický seznam. Složitější implementace bude muset počítat s prohledáváním větších datových sad.
funkceloadSearchData() {
// Data, která mají být použita ve vyhledávacím panelu
nechat země = [
'Austrálie',
'Rakousko',
'Brazílie',
'Kanada',
'Dánsko',
'Egypt',
'Francie',
'Německo',
'USA',
'Vietnam'
];
} - Uvnitř loadSearchData() a pod novým polem získejte prvek div, který uživateli zobrazí odpovídající položky vyhledávání. Do seznamu div přidejte značku ukotvení pro každou datovou položku v seznamu:
// Získá element HTML seznamu
nechat seznam = dokument.getElementById('seznam');
// Přidejte každou datovou položku jako an štítek
zemí.pro každého((země)=>{
nechat a = dokument.createElement("a");
a.innerText = země;
a.classList.add("listItem");
seznam.appendChild (a);
}) - Ve štítku těla index.html, přidejte atribut události onload pro volání nové funkce loadSearchData(). Tím se načtou data při načítání stránky.
<zatížení těla ="loadSearchData()"> - v index.html, než značka body skončí, přidejte značku skriptu, která bude odkazovat na váš soubor JavaScript:
<zatížení těla ="loadSearchData()">
<!-- Obsah vaší webové stránky -->
<skript src="script.js"></script>
</body> - v styly.css, přidejte do rozevíracího seznamu nějaký styl:
#list {
ohraničení: 1px plná světle šedá;
border-radius: 5px;
displej: blok;
}
.listItem {
displej: flex;
směr ohybu: sloupec;
text-dekorace: žádná;
odsazení: 5px 20px;
Černá barva;
}
.listItem:vznášet se {
barva pozadí: světle šedá;
} - OTEVŘENO index.html ve webovém prohlížeči zobrazíte vyhledávací panel a seznam dostupných výsledků vyhledávání. Funkce vyhledávání zatím nefunguje, ale měli byste vidět uživatelské rozhraní, které bude používat:
Jak vytvořit rozevírací seznam s odpovídajícími výsledky na vyhledávacím panelu
Nyní, když máte vyhledávací panel a seznam řetězců pro vyhledávání, můžete přidat funkci vyhledávání. Když uživatel zadá do vyhledávacího pole, zobrazí se pouze určité položky v seznamu.
- v styly.css, nahraďte styl seznamu, aby se seznam ve výchozím nastavení skryl:
#list {
ohraničení: 1px plná světle šedá;
border-radius: 5px;
displej: žádný;
} - v script.js, vytvořte novou funkci s názvem search(). Mějte na paměti, že program zavolá tuto funkci pokaždé, když uživatel zadá nebo odebere znak z vyhledávacího panelu. Některé aplikace budou potřebovat cesty na server, aby mohly načíst informace. V takových případech by tato implementace mohla zpomalit vaše uživatelské rozhraní. Možná budete muset upravit implementaci, abyste to vzali v úvahu.
funkceVyhledávání() {
// zde je funkce vyhledávání
} - Uvnitř funkce search() získejte element div HTML pro seznam. Získejte také prvky značky kotvy HTML pro každou položku v seznamu:
nechat seznamKontejner = dokument.getElementById('seznam');
nechat seznam položek = dokument.getElementsByClassName('listItem'); - Získejte vstup, který uživatel zadal do vyhledávacího panelu:
nechat vstup = dokument.getElementById('searchbar').value
input = input.toLowerCase(); - Porovnejte vstup uživatele s každou položkou v seznamu. Pokud například uživatel zadá „a“, funkce porovná, zda je „a“ uvnitř „Austrálie“, pak „Rakousko“, „Brazílie“, „Kanada“ a tak dále. Pokud se shoduje, zobrazí tuto položku v seznamu. Pokud se neshoduje, skryje danou položku.
nechat noResults = skutečný;
pro (i = 0; i < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="žádný";
pokračovat;
}
jiný {
listItems[i].style.display="flex";
noResults = Nepravdivé;
}
} - Pokud v seznamu nejsou vůbec žádné výsledky, skryjte seznam úplně:
listContainer.style.display = noResults? "žádný": "blok"; - Klikněte na index.html soubor otevřít ve webovém prohlížeči.
- Začněte psát do vyhledávacího panelu. Během psaní se seznam výsledků aktualizuje, aby zobrazoval pouze odpovídající výsledky.
Použití vyhledávacího pole k hledání odpovídajících výsledků
Nyní, když víte, jak vytvořit vyhledávací panel s výběrem řetězců, můžete přidat další funkce.
Můžete například přidat odkazy na své značky ukotvení a otevřít tak různé stránky v závislosti na výsledku, na který uživatel klikne. Vyhledávací panel můžete změnit tak, aby prohledával složitější objekty. Můžete také upravit kód tak, aby fungoval s frameworky, jako je React.
