JavaScript zum Implementieren der Anzeige von Suchdaten
|
In diesem Artikel wird der Datenanzeigecode für die JavaScript-Suche zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Die heutigen Ergebnisse lauten wie folgt:
In diesem Fall gibt es zwei wichtige Punkte : Verwenden Sie zunächst CSS, um Stile anzuzeigen Die zweite Möglichkeit besteht darin, den Eingabeinhalt mit dem Inhalt im Array zu vergleichen, indem js verwendet wird, sodass die Daten angezeigt werden, die den Eingabeinhalt enthalten Schauen wir uns zunächst die Schwierigkeit des CSS-Anzeigestils an: Um die Kontaktteile der beiden Divs nahtlos zu gestalten, müssen Sie Für die abgerundeten Ränder auf der linken und rechten Seite der beiden Div-Boxen müssen wir Werte für Schauen wir uns als Nächstes den JS-Vergleichsteil an: Die Grundidee besteht darin, dass bei der Eingabe von Inhalten das Suchfeld darunter angezeigt wird, um übereinstimmende Daten anzuzeigen. Wenn Sie keine Daten eingeben oder die eingegebenen Daten nicht übereinstimmen, werden keine Daten angezeigt bzw. es werden keine Daten angezeigt. Wenn das Suchfeld den Fokus verliert, verschwindet das Suchfeld darunter. 1. Wenn wir Inhalt in das Suchfeld eingeben, können wir die Funktion 2. Wenn das Suchfeld den Fokus verliert, setzen wir den Anzeigeattributwert des Suchfelds darunter auf „Keine“. Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
.container {
Breite: 500px;
Höhe: 160px;
Polsterung: 40px;
Rand: 100px automatisch
}
#eins {
Breite: 268px;
Höhe: 33px;
schweben: links;
Rand: 0;
Rahmen oben links – Radius: 20px;
Rahmen unten links – Radius: 20px;
Hintergrundfarbe: rgb(245, 246, 247);
Gliederung: keine;
}
#suchen {
Hintergrundfarbe: rgb(252, 85, 49);
Farbe: weiß;
Breite: 70px;
Höhe: 35px;
Zeilenhöhe: 35px;
Textausrichtung: zentriert;
Schriftgröße: 13px;
Rahmenradius: 20px;
Rahmen-oben-links-Radius: 0;
Rahmen unten links-Radius: 0;
schweben: links;
}
#zeigen {
Breite: 270px;
Höhe: 170px;
Rand: 1px durchgezogener RGBA (77, 76, 76, 0,459);
Anzeige: keine;
Rand oben: 40px;
Überlauf: versteckt;
}
#div anzeigen{
Breite: 100 %;
Höhe: 40px;
Zeilenhöhe: 40px;
Texteinzug: 1em;
Anzeige: Block;
}
#div anzeigen:hover{
Hintergrundfarbe: rgb(240, 240, 245);
Cursor:Zeiger;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div id="nav">
<input type="text" id="one" placeholder="Bitte geben Sie den Kurs ein" autocomplete="on">
<div id="search">Suche</div>
</div>
<div id="anzeigen">
<div></div>
</div>
</div>
<Skript>
let arr = ['Kuchen sind billig', 'Möchte Obst essen', '2333', 'CSS-Boutique-Kurs', '2 kleine Freunde', 'Hier sind 2 Brote', 'Lass uns zusammen gehen', 'Sommer der Band', 'Schönes Wetter'];
lass eins = document.getElementById("eins");
lass zeigen = document.getElementById("zeigen")
eins.onfocus = Funktion () {
show.style.display = "Block";
one.style.border = "1px korallenfarben durchgehend"
one.onkeyup = Funktion () {
lass str = '';
lass Begriff=false;
arr.fürEach((Artikel) => {
let index = item.indexOf(one.value);
wenn (~index) {
Zeit=wahr;
str+='<div>'+item+'</div>';//Aktualisiere den Wert von str jedes Mal, sodass du dir keine Sorgen über Duplikate machen musst}
})
//Sehr wichtig if(one.value=='' || !tem){
show.innerHTML='<div>'+'Noch keine Ergebnisse'+'</div>';
}
anders{
show.innerHTML=str;
}
}
}
//Das Onblur-Ereignis tritt ein, wenn das Objekt den Fokus verliert. one.onblur = function () {
show.style.display = "keine"
one.style.border = "1px transparenter Feststoff"
show.innerHTML='';
}
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: 202 kostenlose, hochwertige XHTML-Vorlagen (2)
>>: Zusammenfassung häufig verwendeter Befehle für die Einreichung von Docker-Wettbewerben
Artikel empfehlen
So stellen Sie Redis schnell als Docker-Container bereit
Inhaltsverzeichnis Erste Schritte Datenspeicherun...
Detaillierte Erklärung asynchroner Iteratoren in nodejs
Inhaltsverzeichnis Vorwort Was sind asynchrone It...
Beispiel für Formularaktion und „onSubmit“
Erstens: Aktion ist ein Attribut des Formulars. HT...
Erzielen Sie mit reinem CSS3 in wenigen einfachen Schritten einen 3D-Flip-Effekt
Als Pflichtkurs für Frontend-Entwickler kann CSS3...
Einführung in Docker-Container
Docker-Übersicht Docker ist eine Open-Source-Lösu...
Detailliertes Tutorial zur Installation von MySQL 8.0.22 auf Redhat 7.3 (binäre Installation)
Inhaltsverzeichnis 1. Laden Sie das MySQL-Install...
Der eigentliche Prozess der Implementierung des Zahlenrätsels im WeChat-Applet
Inhaltsverzeichnis Funktionseinführung Rendern 1....
Das Vue-Cropper-Plugin realisiert die Kapselung der Bildaufnahme- und Upload-Komponente
Der spezifische Code zum Einkapseln der Bildaufna...
Beispielerklärung für Ausführungskontext und Ausführungsstapel in JavaScript
JavaScript - Prinzipienreihe Wenn wir in der tägl...
HTML-Tbody-Verwendung
Strukturierte Tabelle (nur IExplore) 1) Gruppieren...
So stellen Sie Egg-Anwendungen auf selbst erstellten Windows-Servern bereit (mit Bildern und Text)
1. Melden Sie sich mit dem IE-Browser beim VPN an...
Der Unterschied und die Verwendung von Strg+z, Strg+c und Strg+d in Linux-Befehlen
Was bedeutet Strg+C, Strg+D, Strg+Z in Linux? Str...
So fügen Sie einem laufenden Docker-Container dynamisch ein Volume hinzu
Jemand hat mich schon einmal gefragt, ob es mögli...
So bedienen Sie Datei- und Ordnerberechtigungen unter Linux
Linux-Dateiberechtigungen Überprüfen wir zunächst...
So lösen Sie das Problem zu vieler geöffneter Dateien in Linux
Die Ursache liegt darin, dass der Prozess zu eine...