A saját automatikus kiegészítõ keresősáv felépítése könnyebb, mint gondolná.
A keresősáv egy népszerű felhasználói felület, amelyet sok modern webhely használ. Ha olyan webhelyet hoz létre, amely bármilyen típusú adatot tartalmaz, akkor előfordulhat, hogy a felhasználók bizonyos elemeket kereshetnek.
Sokféleképpen hozhat létre keresősávot. Létrehozhat összetett keresősávokat, amelyek több szűrő, például név vagy dátum alapján adnak eredményt. A meglévő könyvtárak segíthetnek a keresősáv megvalósításában anélkül, hogy a semmiből építenék.
Létrehozhat azonban egy egyszerű keresősávot is a vanília JavaScript használatával, amely összehasonlítja a felhasználó bevitelét a karakterláncok listájával.
A felhasználói felület hozzáadása a keresősávhoz
Webhelyének tartalmaznia kell egy beviteli mezőt, ahol a felhasználók beírhatják a keresni kívánt szöveget. Ennek egyik módja az, hogy beviteli címkét használ, és úgy stílusozza, hogy úgy nézzen ki, mint egy keresősáv.
- Hozzon létre egy mappát a webhely tárolásához. A mappán belül hozzon létre egy HTML-fájlt, melynek neve index.html.
- Töltse fel a fájlt egy HTML-dokumentum alapvető szerkezetével. Ha nem ismeri a HTML-t, sok van HTML kód példák, amelyeket megtanulhat hogy segítsen felgyorsítani.
<!doctype html>
<html lang="hu-US">
<fej>
<cím>Kereső sáv</title>
</head>
<test>
<div class="tartály">
<!-- A weboldal tartalma ide kerül-->
</div>
</body>
</html> - A div tárolóosztályon belül adjon hozzá egy beviteli címkét. Ez lehetővé teszi a felhasználó számára, hogy beírja a keresni kívánt szöveget. Amikor új karaktert írnak be, webhelye meghívja a search() függvényt. Ezt a funkciót a későbbi lépésekben hozza létre.
Az automatikus kiegészítés attribútum biztosítja, hogy a böngésző ne adjon hozzá saját legördülő listát a korábbi keresési kifejezések alapján.<div class="tartály">
<h2>Országok keresése</h2>
<bemeneti azonosító="kereső sáv" autocomplete="ki" onkeyup="keresés()" típus="szöveg"
név="keresés" helyőrző="Mit keresel?">
</div> - Ugyanabban a mappában, mint a tiéd index.html fájlt, hozzon létre egy új CSS-fájlt stílusok.css.
- Töltse fel a fájlt a teljes weboldal és a keresősáv stílusával:
body {
margó: 0;
párnázás: 0;
háttérszín: #f7f7f7;
}
* {
betűtípus család: "Arial", sans-serif;
}
.tartály {
padding: 100px 25%;
kijelző: flex;
hajlítási irány: oszlop;
vonalmagasság: 2 rem;
betűméret: 1.2em;
szín: #202C39;
}
#kereső sáv {
padding: 15px;
határsugár: 5 képpont;
}
bemenet[type=text] {
-webkit-átmenet: szélesség 0.15skönnyedség be-ki;
átmenet: szélesség 0.15skönnyedség be-ki;
} - Ban ben index.html, adjon hozzá egy hivatkozást a CSS-fájlhoz a head címkén belül és a title címke alatt:
<link rel="stíluslap" href="stílusok.css"> - Nyissa meg a index.html fájlt egy webböngészőben, és tekintse meg a keresősáv felhasználói felületét.
A lista karakterláncainak létrehozása a keresősávhoz
Mielőtt a felhasználó kereshetne, létre kell hoznia egy listát az elérhető elemekről, amelyekre kereshet. Ezt megteheti egy sor karakterlánc segítségével. A húr egy a sok közül JavaScriptben használható adattípusok, és karaktersorozatot jelenthet.
Ezt a listát dinamikusan létrehozhatja JavaScript használatával, az oldal betöltődése közben.
- Belül index.html, a beviteli címke alá írjon be egy div. Ez a div megjelenít egy legördülő listát, amely tartalmazza a felhasználó által keresettnek megfelelő elemek listáját:
<div id="lista"></div> - Ugyanabban a mappában, mint a tiéd index.html fájl és stílusok.css fájlt, hozzon létre egy új fájlt script.js.
- Belül script.js, hozzon létre egy új függvényt loadSearchData() néven. A függvényen belül inicializáljon egy tömböt karakterláncok listájával. Ne feledje, hogy ez egy kis statikus lista. A bonyolultabb megvalósításnak figyelembe kell vennie a nagyobb adatkészletek közötti keresést.
funkcióloadSearchData() {
// A keresősávban használandó adatok
hagyja országok = [
'Ausztrália',
'Ausztria',
'Brazília',
'Kanada',
'Dánia',
'Egyiptom',
'Franciaország',
'Németország',
'Egyesült Államok',
'Vietnam'
];
} - A loadSearchData()-ban és az új tömb alatt szerezze be a div elemet, amely megjeleníti a megfelelő keresési elemeket a felhasználó számára. A lista div részében adjon hozzá egy horgonycímkét a lista minden adateleméhez:
// Szerezze be a lista HTML elemét
hagyja lista = dokumentum.getElementById('list');
// Minden adatelem hozzáadása an címke
országok.az egyes((ország)=>{
hagyja a = dokumentum.createElement("a");
a.innerText = ország;
a.classList.add("listaelem");
lista.appendChild (a);
}) - A törzscímkében index.html, adja hozzá az onload esemény attribútumot az új loadSearchData() függvény meghívásához. Ez betölti az adatokat az oldal betöltésekor.
<body onload="loadSearchData()"> - Ban ben index.html, mielőtt a body címke véget érne, adjon hozzá egy szkriptcímkét a JavaScript-fájlra mutató hivatkozáshoz:
<body onload="loadSearchData()">
<!-- Az Ön weboldalának tartalma -->
<script src="script.js"></script>
</body> - Ban ben stílusok.css, adjon hozzá stílust a legördülő listához:
#list {
keret: 1px tömör világosszürke;
határsugár: 5 képpont;
kijelző: blokk;
}
.listaelem {
kijelző: flex;
hajlítási irány: oszlop;
szöveg-dekoráció: nincs;
padding: 5px 20px;
fekete szín;
}
.listaelem:lebeg {
háttérszín: világosszürke;
} - Nyisd ki index.html egy webböngészőben a keresősáv és az elérhető keresési eredmények listájának megtekintéséhez. A keresési funkció még nem működik, de látnia kell a felhasználói felületet, amelyet használni fog:
A legördülő menü létrehozása az egyező eredményekkel a keresősávon belül
Most, hogy van egy keresősávja és a felhasználók keresni kívánt karakterláncok listája, hozzáadhatja a keresési funkciót. Miközben a felhasználó gépel a keresősávba, csak bizonyos elemek jelennek meg a listában.
- Ban ben stílusok.css, cserélje ki a lista stílusát a lista alapértelmezés szerinti elrejtéséhez:
#list {
keret: 1px tömör világosszürke;
határsugár: 5 képpont;
kijelző: nincs;
} - Ban ben script.js, hozzon létre egy új függvényt search(). Ne feledje, hogy a program minden alkalommal meghívja ezt a függvényt, amikor a felhasználó beír vagy eltávolít egy karaktert a keresősávból. Egyes alkalmazásoknak egy szerverhez kell eljutniuk az információk lekéréséhez. Ilyen esetekben ez a megvalósítás lelassíthatja a felhasználói felületet. Előfordulhat, hogy ennek figyelembevételéhez módosítania kell a megvalósítást.
funkciókeresés() {
// a keresési funkció ide kerül
} - A search() függvényen belül szerezze be a HTML div elemet a listához. A listán belül minden egyes elem HTML horgonycímke elemeit is lekérheti:
hagyja listContainer = dokumentum.getElementById('list');
hagyja listItems = dokumentum.getElementsByClassName('listItem'); - Szerezze meg a felhasználó által a keresősávba beírt bevitelt:
hagyja bemenet = dokumentum.getElementById('searchbar').érték
input = input.toLowerCase(); - Hasonlítsa össze a felhasználó bevitelét a lista egyes elemeivel. Például, ha a felhasználó beírja az "a" értéket, a függvény összehasonlítja, ha az "a" az "Ausztrália", akkor az "Ausztria", "Brazília", "Kanada" és így tovább. Ha egyezik, megjeleníti az elemet a listában. Ha nem egyezik, akkor elrejti az elemet.
hagyja noResults = igaz;
for (i = 0; én < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="egyik sem";
folytatni;
}
más {
listItems[i].style.display="Flex";
noResults = hamis;
}
} - Ha egyáltalán nincs találat a listában, rejtse el teljesen a listát:
listContainer.style.display = nincs Eredmény? "egyik sem": "Blokk"; - Kattintson a index.html fájlt a böngészőben való megnyitásához.
- Kezdjen el gépelni a keresősávba. Gépelés közben a találatok listája frissül, és csak a megfelelő találatokat jeleníti meg.
Keresősáv használata a megfelelő találatok kereséséhez
Most, hogy tudja, hogyan hozhat létre keresősávot karakterlánc-kijelöléssel, további funkciókat adhat hozzá.
Például linkeket adhat hozzá a horgonycímkéihez, hogy különböző oldalakat nyisson meg attól függően, hogy a felhasználó milyen eredményre kattint. Módosíthatja a keresősávot, hogy összetettebb objektumok között keressen. A kódot úgy is módosíthatja, hogy az olyan keretrendszerekkel működjön, mint a React.