Het bouwen van uw eigen zoekbalk voor automatisch aanvullen is eenvoudiger dan u denkt.
Een zoekbalk is een populair UI-element dat veel moderne websites gebruiken. Als u een site bouwt die elk type gegevens bevat, wilt u misschien dat uw gebruikers naar specifieke items kunnen zoeken.
Er zijn veel manieren waarop u een zoekbalk kunt bouwen. U kunt complexe zoekbalken maken die resultaten opleveren op basis van meerdere filters, zoals een naam of datum. Bestaande bibliotheken kunnen u helpen een zoekbalk te implementeren zonder deze helemaal opnieuw te bouwen.
U kunt echter ook een eenvoudige zoekbalk maken met vanilla JavaScript, die de invoer van een gebruiker vergelijkt met een lijst met tekenreeksen.
Hoe de gebruikersinterface voor de zoekbalk toe te voegen
Uw website moet een invoervak bevatten waarin uw gebruikers de tekst kunnen invoeren waarnaar ze willen zoeken. Een manier om dit te doen is door een invoertag te gebruiken en deze zo op te maken dat het eruitziet als een zoekbalk.
- Maak een map om uw website op te slaan. Maak in de map een HTML-bestand met de naam index.html.
- Vul uw bestand met de basisstructuur van een HTML-document. Als u niet bekend bent met HTML, er zijn er veel Voorbeelden van HTML-code die u kunt leren om u op weg te helpen.
<!doctype html>
<html lang="nl-VS">
<hoofd>
<titel>Zoekbalk</title>
</head>
<lichaam>
<div klasse="container">
<!-- Webpagina-inhoud komt hier-->
</div>
</body>
</html> - Voeg binnen de containerklasse div een invoertag toe. Hierdoor kan de gebruiker de tekst typen waarnaar hij wil zoeken. Telkens wanneer ze een nieuw teken invoeren, roept uw website de functie search() aan. U maakt deze functie in latere stappen.
Het kenmerk autocomplete zorgt ervoor dat een browser geen eigen vervolgkeuzemenu toevoegt op basis van eerdere zoektermen.<div klasse="container">
<h2>Zoek Landen</h2>
<invoer-id="zoekbalk" automatisch aanvullen="uit" onkeyup="zoekopdracht()" type="tekst"
naam="zoekopdracht" tijdelijke aanduiding="Waar bent u naar op zoek?">
</div> - In dezelfde map als uw index.html bestand, maakt u een nieuw CSS-bestand met de naam stijlen.css.
- Vul het bestand met styling voor de algemene webpagina en de zoekbalk:
lichaam {
marge: 0;
opvulling: 0;
Achtergrond kleur: #f7f7f7;
}
* {
font-familie: "Ariaal", schreefloos;
}
.container {
opvulling: 100px 25%;
weergeven: flex;
flex-richting: kolom;
regelhoogte: 2rem;
lettertypegrootte: 1.2em;
kleur: #202C39;
}
#zoekbalk {
opvulling: 15px;
grensstraal: 5px;
}
invoer[type=tekst] {
-webkit-overgang: breedte 0.15sgemak-in-uit;
overgang: breedte 0.15sgemak-in-uit;
} - In index.html, voeg een link naar je CSS-bestand toe binnen de head-tag en onder de title-tag:
<link rel="stijlblad" href="stijlen.css"> - Open de index.html bestand in een webbrowser en bekijk de gebruikersinterface van uw zoekbalk.
Hoe de lijstreeksen voor de zoekbalk te maken
Voordat de gebruiker kan zoeken, moet u een lijst met beschikbare items maken waarnaar ze kunnen zoeken. U kunt dit doen met een reeks strings. Een string is een van de vele gegevenstypen die u in JavaScript kunt gebruiken, en kan een reeks tekens vertegenwoordigen.
U kunt deze lijst dynamisch maken met behulp van JavaScript terwijl de pagina wordt geladen.
- Binnen index.html, voeg onder de invoertag een div toe. Deze div geeft een vervolgkeuzelijst weer met een lijst met items die overeenkomen met waar de gebruiker naar zoekt:
<div-id="lijst"></div> - In dezelfde map als uw index.html bestand en stijlen.css bestand, maak een nieuw bestand met de naam script.js.
- Binnen script.js, maak een nieuwe functie met de naam loadSearchData(). Initialiseer binnen de functie een array met een lijst met strings. Houd er rekening mee dat dit een kleine statische lijst is. Een complexere implementatie zal rekening moeten houden met het doorzoeken van grotere datasets.
functieloadSearchData() {
// Gegevens die in de zoekbalk moeten worden gebruikt
laten landen = [
'Australië',
'Oostenrijk',
'Brazilië',
'Canada',
'Denemarken',
'Egypte',
'Frankrijk',
'Duitsland',
'VS',
'Vietnam'
];
} - Haal binnen loadSearchData() en onder de nieuwe array het div-element op dat de overeenkomende zoekitems aan de gebruiker zal weergeven. Voeg binnen de lijst-div een ankertag toe voor elk gegevensitem in de lijst:
// Haal het HTML-element van de lijst op
laten lijst = document.getElementById('lijst');
// Voeg elk gegevensitem toe als een label
landen.voor elk((land)=>{
laten een = document.createElement("een");
a.innerText = land;
a.classList.add("lijstItem");
lijst.appendKind (a);
}) - In de bodytag van index.html, voegt u het gebeurtenisattribuut onload toe om de nieuwe functie loadSearchData() aan te roepen. Hierdoor worden de gegevens geladen terwijl de pagina wordt geladen.
<lichaam onload="loadSearchData()"> - In index.html, voordat de body-tag eindigt, voegt u een scripttag toe om naar uw JavaScript-bestand te linken:
<lichaam onload="loadSearchData()">
<!-- De inhoud van uw webpagina -->
<script src="script.js"></script>
</body> - In stijlen.css, voeg wat styling toe aan de vervolgkeuzelijst:
#lijst {
rand: 1px effen lichtgrijs;
grensstraal: 5px;
weergeven: blokkeren;
}
.lijstItem {
weergeven: flex;
flex-richting: kolom;
tekstversiering: geen;
opvulling: 5px 20px;
de kleur zwart;
}
.lijstItem:zweven {
achtergrondkleur: lichtgrijs;
} - Open index.html in een webbrowser om uw zoekbalk en de lijst met beschikbare zoekresultaten te bekijken. De zoekfunctionaliteit werkt nog niet, maar u zou de gebruikersinterface moeten zien die deze zal gebruiken:
Hoe u de vervolgkeuzelijst maakt met overeenkomende resultaten in de zoekbalk
Nu u een zoekbalk en een lijst met tekenreeksen hebt waarop gebruikers kunnen zoeken, kunt u de zoekfunctionaliteit toevoegen. Terwijl de gebruiker in de zoekbalk typt, worden alleen bepaalde items in de lijst weergegeven.
- In stijlen.css, vervang de stijl voor de lijst om de lijst standaard te verbergen:
#lijst {
rand: 1px effen lichtgrijs;
grensstraal: 5px;
Geen weergeven;
} - In script.js, maak een nieuwe functie met de naam zoeken(). Houd er rekening mee dat het programma deze functie elke keer zal aanroepen als de gebruiker een teken invoert of verwijdert uit de zoekbalk. Sommige toepassingen hebben uitstapjes naar een server nodig om informatie op te halen. In dergelijke gevallen kan deze implementatie uw gebruikersinterface vertragen. Mogelijk moet u de implementatie aanpassen om hiermee rekening te houden.
functiezoekopdracht() {
// zoekfunctionaliteit komt hier
} - Haal in de functie search() het HTML div-element voor de lijst op. Haal ook de HTML-ankertagelementen op van elk item in de lijst:
laten lijstContainer = document.getElementById('lijst');
laten lijstItems = document.getElementsByClassName('lijstItem'); - Haal de invoer op die de gebruiker in de zoekbalk heeft ingevoerd:
laten invoer = document.getElementById('zoekbalk').waarde
input = input.toLowerCase(); - Vergelijk de invoer van de gebruiker met elk item in de lijst. Als de gebruiker bijvoorbeeld "a" invoert, zal de functie vergelijken of "a" binnen "Australië" valt, dan "Oostenrijk", "Brazilië", "Canada", enzovoort. Als het overeenkomt, wordt dat item in de lijst weergegeven. Als het niet overeenkomt, wordt dat item verborgen.
laten geenResultaten = WAAR;
voor (i = 0; i < lijstItems.lengte; ik++) {
if (!listItems[i].innerHTML.toLowerCase().includes (invoer) || invoer "") {
listItems[i].style.display="geen";
doorgaan;
}
anders {
listItems[i].style.display="buigen";
geenResultaten = vals;
}
} - Als er helemaal geen resultaten in de lijst staan, verberg de lijst dan volledig:
listContainer.style.display = geen resultaten? "geen": "blok"; - Klik op de index.html bestand om het in een webbrowser te openen.
- Begin met typen in de zoekbalk. Terwijl u typt, wordt de lijst met resultaten bijgewerkt om alleen overeenkomende resultaten weer te geven.
Een zoekbalk gebruiken om te zoeken naar overeenkomende resultaten
Nu u weet hoe u een zoekbalk met stringselectie maakt, kunt u meer functionaliteit toevoegen.
U kunt bijvoorbeeld links aan uw ankertags toevoegen om verschillende pagina's te openen, afhankelijk van het resultaat waarop de gebruiker klikt. U kunt uw zoekbalk wijzigen om door complexere objecten te zoeken. U kunt de code ook aanpassen om te werken met frameworks zoals React.