Vytvorenie vlastného vyhľadávacieho panela s automatickým dopĺňaním je jednoduchšie, než si myslíte.
Vyhľadávací panel je populárny prvok používateľského rozhrania, ktorý využíva mnoho moderných webových stránok. Ak vytvárate stránku, ktorá obsahuje akýkoľvek typ údajov, možno budete chcieť, aby vaši používatelia mohli vyhľadávať konkrétne položky.
Existuje mnoho spôsobov, ako môžete vytvoriť vyhľadávací panel. Môžete vytvárať zložité vyhľadávacie panely, ktoré vracajú výsledky na základe viacerých filtrov, ako je napríklad názov alebo dátum. Existujúce knižnice vám môžu pomôcť implementovať vyhľadávací panel bez toho, aby ste ho museli budovať od začiatku.
Môžete však tiež vytvoriť jednoduchý vyhľadávací panel pomocou vanilkového JavaScriptu, ktorý porovnáva vstup používateľa so zoznamom reťazcov.
Ako pridať používateľské rozhranie pre vyhľadávací panel
Vaša webová lokalita by mala obsahovať vstupné pole, do ktorého môžu používatelia zadať text, ktorý chcú vyhľadať. Jedným zo spôsobov, ako to urobiť, je použiť vstupnú značku a upraviť ju tak, aby vyzerala ako vyhľadávací panel.
- Vytvorte priečinok na uloženie svojej webovej stránky. V priečinku vytvorte súbor HTML s názvom index.html.
- Naplňte svoj súbor základnou štruktúrou dokumentu HTML. Ak nie ste oboznámení s HTML, je ich veľa Príklady HTML kódu, ktoré sa môžete naučiť ktoré vám pomôžu dostať sa do tempa.
<!doctype html>
<html jazyk="en-US">
<hlavu>
<titul>Vyhľadávací panel</title>
</head>
<telo>
<trieda div="kontajner">
<!-- Obsah webovej stránky sa nachádza tu-->
</div>
</body>
</html> - Do prvku div triedy kontajnera pridajte vstupnú značku. To umožní používateľovi zadať text, ktorý by chcel vyhľadať. Vždy, keď zadajú nový znak, váš web zavolá funkciu search(). Túto funkciu vytvoríte v neskorších krokoch.
Atribút automatického dopĺňania zaisťuje, že prehliadač nepridá vlastnú rozbaľovaciu ponuku na základe predchádzajúcich hľadaných výrazov.<trieda div="kontajner">
<h2>Hľadať krajiny</h2>
<vstupné id="vyhľadávací panel" automatické dopĺňanie ="vypnuté" onkeyup="Vyhľadávanie()" typ="text"
meno="Vyhľadávanie" zástupný symbol ="Čo hľadáš?">
</div> - V rovnakom priečinku ako váš index.html súbor, vytvorte nový súbor CSS s názvom styles.css.
- Vyplňte súbor štýlom pre celú webovú stránku a panel vyhľadávania:
telo {
okraj: 0;
výplň: 0;
farba pozadia: #f7f7f7;
}
* {
rodina písiem: "Arial", bezpätkové;
}
.kontajner {
padding: 100px 25%;
displej: flex;
smer ohybu: stĺpec;
výška čiary: 2rem;
veľkosť písma: 1.2em;
farba: #202C39;
}
#searchbar {
výplň: 15px;
border-radius: 5px;
}
vstup[type=text] {
-webkit-prechod: šírka 00,15 seasy-in-out;
prechod: šírka 00,15 seasy-in-out;
} - In index.html, pridajte odkaz na svoj súbor CSS do značky head a pod značku title:
<odkaz rel="štýlov" href="styles.css"> - Otvor index.html súbor vo webovom prehliadači a zobrazte používateľské rozhranie svojho vyhľadávacieho panela.
Ako vytvoriť reťazce zoznamu pre vyhľadávací panel
Predtým, ako bude môcť používateľ vyhľadávať, budete musieť vytvoriť zoznam dostupných položiek, ktoré môže vyhľadávať. Môžete to urobiť pomocou poľa reťazcov. Struna je jednou z mnohých dátové typy, ktoré môžete použiť v JavaScriptea môže predstavovať postupnosť znakov.
Tento zoznam môžete dynamicky vytvoriť pomocou JavaScriptu, keď sa stránka načítava.
- Vnútri index.html, pod vstupnú značku pridajte div. Tento div zobrazí rozbaľovaciu ponuku, ktorá bude obsahovať zoznam položiek, ktoré zodpovedajú tomu, čo používateľ hľadá:
<div id="zoznam"></div> - V rovnakom priečinku ako váš index.html súbor a styles.css súbor, vytvorte nový súbor s názvom script.js.
- Vnútri script.jsvytvorte novú funkciu s názvom loadSearchData(). Vo vnútri funkcie inicializujte pole so zoznamom reťazcov. Majte na pamäti, že toto je malý statický zoznam. Komplexnejšia implementácia bude musieť brať do úvahy vyhľadávanie cez väčšie súbory údajov.
funkciuloadSearchData() {
// Údaje, ktoré sa majú použiť vo vyhľadávacom paneli
nech krajiny = [
'Austrália',
'Rakúsko',
'Brazília',
'Kanada',
'Dánsko',
'Egypt',
'Francúzsko',
'Nemecko',
'USA',
'Vietnam'
];
} - Vo vnútri loadSearchData() a pod novým poľom získajte prvok div, ktorý používateľovi zobrazí zodpovedajúce položky vyhľadávania. Do zoznamu div pridajte značku ukotvenia pre každú údajovú položku v zozname:
// Získanie prvku HTML zoznamu
nech zoznam = dokument.getElementById('zoznam');
// Pridajte každú údajovú položku ako tag
krajín.pre každý((krajina)=>{
nech a = dokument.createElement("a");
a.innerText = krajina;
a.classList.add("listItem");
zoznam.appendChild (a);
}) - V značke tela index.html, pridajte atribút udalosti onload na volanie novej funkcie loadSearchData(). Tým sa načítajú údaje počas načítavania stránky.
<zaťaženie tela ="loadSearchData()"> - In index.html, pred koncom značky body pridajte značku skriptu, ktorá bude odkazovať na váš súbor JavaScript:
<zaťaženie tela ="loadSearchData()">
<!-- Obsah vašej webovej stránky -->
<skript src="script.js"></script>
</body> - In styles.css, pridajte nejaký štýl do rozbaľovacieho zoznamu:
#list {
orámovanie: 1px plná svetlošedá;
border-radius: 5px;
displej: blok;
}
.listItem {
displej: flex;
smer ohybu: stĺpec;
text-dekorácia: žiadna;
padding: 5px 20px;
farba: čierna;
}
.listItem:vznášať sa {
farba pozadia: svetlošedá;
} - OTVORENÉ index.html vo webovom prehliadači, aby ste zobrazili svoj vyhľadávací panel a zoznam dostupných výsledkov vyhľadávania. Funkcia vyhľadávania zatiaľ nefunguje, ale mali by ste vidieť používateľské rozhranie, ktoré bude používať:
Ako vytvoriť rozbaľovaciu ponuku so zodpovedajúcimi výsledkami vo vyhľadávacom paneli
Teraz, keď máte vyhľadávací panel a zoznam reťazcov, ktoré môžu používatelia vyhľadávať, môžete pridať funkciu vyhľadávania. Keď používateľ zadá do vyhľadávacieho panela, zobrazia sa iba určité položky v zozname.
- In styles.css, nahraďte štýl zoznamu, aby sa zoznam predvolene skryl:
#list {
orámovanie: 1px plná svetlošedá;
border-radius: 5px;
displej: žiadny;
} - In script.jsvytvorte novú funkciu s názvom search(). Majte na pamäti, že program zavolá túto funkciu vždy, keď používateľ zadá alebo odstráni znak z vyhľadávacieho panela. Niektoré aplikácie budú na získanie informácií potrebovať cesty na server. V takýchto prípadoch by táto implementácia mohla spomaliť vaše používateľské rozhranie. Možno budete musieť upraviť implementáciu, aby ste to zohľadnili.
funkciuVyhľadávanie() {
// tu je funkcia vyhľadávania
} - Vo funkcii search() získajte prvok div HTML pre zoznam. Získajte tiež prvky značky kotvy HTML každej položky v zozname:
nech zoznamKontajner = dokument.getElementById('zoznam');
nech zoznam položiek = dokument.getElementsByClassName('listItem'); - Získajte vstup, ktorý používateľ zadal do vyhľadávacieho panela:
nech vstup = dokument.getElementById('searchbar').value
input = input.toLowerCase(); - Porovnajte vstup používateľa s každou položkou v zozname. Napríklad, ak používateľ zadá „a“, funkcia porovná, či „a“ je v „Austrálii“, potom „Rakúsko“, „Brazília“, „Kanada“ atď. Ak sa zhoduje, zobrazí túto položku v zozname. Ak sa nezhoduje, túto položku skryje.
nech noResults = pravda;
pre (i = 0; i < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="žiadny";
ďalej;
}
inak {
listItems[i].style.display="flex";
noResults = falošný;
}
} - Ak v zozname nie sú žiadne výsledky, úplne ho skryte:
listContainer.style.display = noResults? "žiadny": "blokovať"; - Klikni na index.html súbor na jeho otvorenie vo webovom prehliadači.
- Začnite písať do vyhľadávacieho panela. Počas zadávania sa zoznam výsledkov aktualizuje tak, aby zobrazoval iba zodpovedajúce výsledky.
Použitie vyhľadávacieho panela na vyhľadávanie zodpovedajúcich výsledkov
Teraz, keď viete, ako vytvoriť vyhľadávací panel s výberom reťazcov, môžete pridať ďalšie funkcie.
Môžete napríklad pridať odkazy do svojich značiek ukotvenia a otvoriť tak rôzne stránky v závislosti od výsledku, na ktorý používateľ klikne. Panel vyhľadávania môžete zmeniť tak, aby vyhľadával v zložitejších objektoch. Môžete tiež upraviť kód tak, aby fungoval s rámcami, ako je React.
