Oman automaattisen täydennyksen hakupalkin luominen on helpompaa kuin uskotkaan.
Hakupalkki on suosittu käyttöliittymäelementti, jota monet nykyaikaiset verkkosivustot käyttävät. Jos rakennat sivustoa, joka sisältää kaikentyyppisiä tietoja, saatat haluta, että käyttäjäsi voivat etsiä tiettyjä kohteita.
Voit rakentaa hakupalkin monella eri tavalla. Voit luoda monimutkaisia hakupalkkeja, jotka palauttavat tuloksia useiden suodattimien, kuten nimen tai päivämäärän, perusteella. Olemassa olevat kirjastot voivat auttaa sinua toteuttamaan hakupalkin rakentamatta sitä tyhjästä.
Voit kuitenkin myös luoda yksinkertaisen hakupalkin käyttämällä vanilja JavaScriptiä, joka vertaa käyttäjän syötettä merkkijonoluetteloon.
Käyttöliittymän lisääminen hakupalkkiin
Verkkosivustollasi tulee olla syöttökenttä, johon käyttäjät voivat kirjoittaa etsimästään tekstiä. Yksi tapa tehdä tämä on käyttää syöttötunnistetta ja muotoilla se näyttämään hakupalkilta.
- Luo kansio verkkosivustosi tallentamista varten. Luo kansioon HTML-tiedosto nimeltä index.html.
- Täytä tiedostosi HTML-dokumentin perusrakenteella. Jos et ole perehtynyt HTML: ään, niitä on monia HTML-koodiesimerkkejä voit oppia auttaa sinua pääsemään vauhtiin.
<!doctype html>
<html lang="fi-US">
<pää>
<otsikko>Hakupalkki</title>
</head>
<kehon>
<div class="kontti">
<!-- Verkkosivun sisältö menee tänne-->
</div>
</body>
</html> - Lisää syöttötunniste säilön luokan div sisään. Näin käyttäjä voi kirjoittaa tekstin, jota hän haluaa etsiä. Aina kun he syöttävät uuden merkin, verkkosivustosi kutsuu search()-funktiota. Luot tämän toiminnon myöhemmissä vaiheissa.
Automaattinen täydennys -attribuutti varmistaa, että selain ei lisää omaa pudotusvalikkoaan aikaisempien hakutermien perusteella.<div class="kontti">
<h2>Hae maita</h2>
<syöte id="hakupalkki" automaattinen täydennys ="vinossa" onkeyup="Hae()" tyyppi="teksti"
nimi ="Hae" paikkamerkki="Mitä etsit?">
</div> - Samassa kansiossa kuin sinun index.html tiedosto, luo uusi CSS-tiedosto nimeltä styles.css.
- Täytä tiedosto koko verkkosivun ja hakupalkin tyylillä:
body {
marginaali: 0;
pehmuste: 0;
taustaväri: #f7f7f7;
}
* {
font-family: "Arial", sans-serif;
}
.container {
täyte: 100px 25%;
näyttö: flex;
flex-suunta: pylväs;
linjan korkeus: 2rem;
Fonttikoko: 1.2em;
väri: #202C39;
}
#hakupalkki {
täyte: 15px;
reunan säde: 5px;
}
syöttö[tyyppi=teksti] {
-webkit-siirtymä: leveys 0.15shelppous sisään-ulos;
siirtyminen: leveys 0.15shelppous sisään-ulos;
} - Sisään index.html, lisää linkki CSS-tiedostoosi head-tunnisteen sisään ja otsikkotunnisteen alle:
<linkki rel="tyylisivu" href="styles.css"> - Avaa index.html tiedosto verkkoselaimessa ja tarkastella hakupalkin käyttöliittymää.
Luettelomerkkijonojen luominen hakupalkkiin
Ennen kuin käyttäjä voi etsiä, sinun on luotava luettelo saatavilla olevista kohteista, joita hän voi etsiä. Voit tehdä tämän joukolla merkkijonoja. Merkkijono on yksi monista tietotyyppejä, joita voit käyttää JavaScriptissä, ja se voi edustaa merkkijonoa.
Voit luoda tämän luettelon dynaamisesti JavaScriptin avulla sivun latautuessa.
- Sisällä index.html, lisää syöttötunnisteen alle div. Tämä div näyttää avattavan valikon, joka sisältää luettelon kohteista, jotka vastaavat käyttäjän etsimää:
<div id="lista"></div> - Samassa kansiossa kuin sinun index.html tiedosto ja styles.css tiedosto, luo uusi tiedosto nimeltä script.js.
- Sisällä script.js, luo uusi funktio nimeltä loadSearchData(). Alusta funktion sisällä taulukko merkkijonoluettelolla. Muista, että tämä on pieni staattinen luettelo. Monimutkaisemmassa toteutuksessa on otettava huomioon haku isommista tietokokonaisuuksista.
toimintoloadSearchData() {
// Hakupalkissa käytettävät tiedot
antaa maat = [
'Australia',
'Itävalta',
'Brasilia',
'Kanada',
'Tanska',
'Egypti',
'Ranska',
'Saksa',
'USA',
'Vietnam'
];
} - Hanki loadSearchData():n sisällä ja uuden taulukon alapuolella div-elementti, joka näyttää vastaavat hakukohteet käyttäjälle. Lisää luettelodiv-kohtaan ankkuritunniste jokaiselle luettelon tietokohdalle:
// Hanki luettelon HTML-elementti
antaa lista = asiakirja.getElementById('list');
// Lisää jokainen tietokohde muodossa tag
maat.jokaiselle((maa)=>{
antaa a = asiakirja.createElement("a");
a.innerText = maa;
a.classList.add("listatuote");
lista.appendChild (a);
}) - Sisältötunnisteessa index.html, lisää lataustapahtumaattribuutti kutsuaksesi uutta loadSearchData()-funktiota. Tämä lataa tiedot sivun latautuessa.
<kehon kuormitus ="loadSearchData()"> - Sisään index.html, ennen kuin body-tagi päättyy, lisää komentosarjatunniste linkittääksesi JavaScript-tiedostoosi:
<kehon kuormitus ="loadSearchData()">
<!-- Verkkosivusi sisältö -->
<komentosarja src="script.js"></script>
</body> - Sisään styles.css, lisää tyyliä avattavaan luetteloon:
#list {
reuna: 1px kiinteä vaaleanharmaa;
reunan säde: 5px;
näyttö: lohko;
}
.listItem {
näyttö: flex;
flex-suunta: pylväs;
tekstikoristelu: ei mitään;
täyte: 5px 20px;
väri musta;
}
.listItem:hover {
taustaväri: vaaleanharmaa;
} - Avata index.html verkkoselaimessa nähdäksesi hakupalkkisi ja luettelon käytettävissä olevista hakutuloksista. Hakutoiminto ei vielä toimi, mutta sinun pitäisi nähdä sen käyttämä käyttöliittymä:
Avattavan valikon luominen vastaavilla tuloksilla hakupalkissa
Nyt kun sinulla on hakupalkki ja luettelo merkkijonoista, joista käyttäjät voivat hakea, voit lisätä hakutoiminnon. Kun käyttäjä kirjoittaa hakupalkkiin, vain tietyt luettelon kohteet näkyvät.
- Sisään styles.css, vaihda luettelon tyyli piilottaaksesi luettelon oletuksena:
#list {
reuna: 1px kiinteä vaaleanharmaa;
reunan säde: 5px;
näyttö: ei mitään;
} - Sisään script.js, luo uusi funktio nimeltä search(). Muista, että ohjelma kutsuu tätä toimintoa aina, kun käyttäjä syöttää tai poistaa merkin hakupalkista. Jotkut sovellukset tarvitsevat matkoja palvelimelle tietojen hakemiseksi. Tällaisissa tapauksissa tämä toteutus voi hidastaa käyttöliittymääsi. Sinun on ehkä muutettava toteutusta ottaaksesi tämän huomioon.
toimintoHae() {
// hakutoiminto menee tähän
} - Hae luettelon HTML-div-elementti search()-funktion sisällä. Hanki myös kunkin luettelon kohteen HTML-ankkuritunnisteelementit:
antaa listContainer = asiakirja.getElementById('list');
antaa listItems = asiakirja.getElementsByClassName('listItem'); - Hanki syöte, jonka käyttäjä syötti hakupalkkiin:
antaa syöttö = asiakirja.getElementById('hakupalkki').arvo
input = input.toLowerCase(); - Vertaa käyttäjän syötteitä luettelon jokaiseen kohtaan. Jos käyttäjä esimerkiksi kirjoittaa "a", funktio vertaa, onko "a" sisällä "Australia", sitten "Itävalta", "Brasilia", "Kanada" ja niin edelleen. Jos se vastaa, se näyttää kyseisen kohteen luettelossa. Jos se ei täsmää, se piilottaa kohteen.
antaa noResults = totta;
for (i = 0; i < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="ei mitään";
jatkaa;
}
muu {
listItems[i].style.display="flex";
noResults = väärä;
}
} - Jos luettelossa ei ole tuloksia ollenkaan, piilota luettelo kokonaan:
listContainer.style.display = ei tuloksia? "ei mitään": "lohko"; - Klikkaa index.html tiedosto avataksesi sen verkkoselaimessa.
- Aloita kirjoittaminen hakupalkkiin. Kun kirjoitat, tulosluettelo päivittyy näyttämään vain vastaavat tulokset.
Hakupalkin käyttäminen vastaavien tulosten etsimiseen
Nyt kun osaat luoda hakupalkin merkkijonovalinnan avulla, voit lisätä toimintoja.
Voit esimerkiksi lisätä linkkejä ankkuritunnisteihisi avataksesi eri sivuja riippuen tuloksesta, jota käyttäjä napsauttaa. Voit muuttaa hakupalkkia etsimään monimutkaisempia objekteja. Voit myös muokata koodia toimimaan kehysten, kuten React, kanssa.
