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
mysql5.6.zip-Format komprimierte Version Installations-Grafik-Tutorial
Vorwort: MySQL ist ein relationales Datenbankverw...
Installationsmethode der dekomprimierten Version von MySQL 5.7.18 unter Win7x64
Weiterführende Literatur: Beheben Sie das Problem...
WeChat-Applet implementiert Sortierfunktion basierend auf Datum und Uhrzeit
Ich habe vor kurzem ein kleines Programmierprojek...
Detaillierte Erklärung der Lösung für das Problem der zu kleinen Ubuntu-Systemschnittstelle in vmware14Pro
1. Betriebsumgebung vmware14pro Ubuntu 16.04LTS 2...
Der Unterschied zwischen Hash-Modus und Verlaufsmodus im Vue-Router
vue-router hat zwei Modi Hash-Modus Verlaufsmodus...
Konstruktions- und Nutzungsprozess des Vue3.0-Projekts
Inhaltsverzeichnis 1. Projektkonstruktion 2: Verz...
MySQL 5.7.18 Green Edition Download- und Installations-Tutorial
Dieser Artikel beschreibt den detaillierten Vorga...
Tutorial zu XHTML-Webseiten
<br />Dieser Artikel soll Anfängern hauptsäc...
So installieren und ändern Sie das Anfangskennwort von mysql5.7.18 unter Centos7.3
In diesem Artikel erfahren Sie, wie Sie mysql5.7....
Die wichtigsten Unterschiede zwischen MySQL 4.1/5.0/5.1/5.5/5.6
Einige Befehlsunterschiede zwischen den Versionen...
Vue3 kapselt die Textskelett-Effektkomponente der Seitennavigation
Vue3-Projektkapselung Seitennavigation Textskelet...
Der Prozess der Verwendung von vxe-table zum Erstellen bearbeitbarer Tabellen in Vue
Im Projekt gibt es eine Tabelle, die online bearb...
Spezifische Verwendung von MySQL-Operatoren (und, oder, in, nicht)
Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...
MySQL-Installationsinformationen unter Linux-Server anzeigen
Sehen Sie sich die Installationsinformationen von...
Leitfaden für Anfänger zum Erstellen einer Website ⑥: Detaillierte Verwendung von FlashFXP
Heute werde ich die grundlegendsten Funktionen von...