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
MySQL 8.0.19 Installations- und Konfigurations-Tutorial unter Windows 10
Ich werde nächstes Semester MySQL lernen. Ich hab...
So implementieren Sie https mit Nginx und OpenSSL
Wenn die Serverdaten nicht verschlüsselt und mit ...
Praktische Aufzeichnung der Handhabung von MySQL-Problemen beim automatischen Herunterfahren
Ich habe vor Kurzem jemandem bei einem Projekt ge...
Design-Story: Der Wachmann, der sich Nummernschilder nicht merken kann
<br />Um die Fahrzeuge zu regeln, die in die...
Sammlung einer Zusammenfassung der HTML-Iframe-Nutzung
Detaillierte Analyse der Iframe-Nutzung <iframe...
Eine Sammlung gängiger Verwendungen von HTML-Meta-Tags
Was ist ein Mata-Tag? Das <meta>-Element li...
JavaScript-Operationselemente zeigen Ihnen, wie Sie den Seiteninhaltsstil ändern
Inhaltsverzeichnis 1. Bedienelemente 1.1. Element...
Vue verwendet berechnete Eigenschaften, um die Erstellung dynamischer Schieberegler abzuschließen
Layoutteil: <div id="Schieberegler"&...
Einfache Prinzipien für die Gestaltung des Webseiten-Layouts
Dieser Artikel fasst einige einfache Prinzipien d...
Pygame-Code zum Erstellen eines Schlangenspiels
Inhaltsverzeichnis Verwendete Pygame-Funktionen E...
Mehrere häufig verwendete Single-Page-Anwendungswebsite-Sharing
CSS3Bitte Schauen Sie sich diese Website selbst a...
Analyse der praktischen Erfahrung bei der Verwendung von Docker zum Erstellen von Microservices mit SpringBoot
Was ist das? Spring Boot ist ein Unterprojekt der...
VMware Workstation Pro installiert das Win10-Betriebssystem in Reinform
Dieser Artikel beschreibt die Schritte zur Instal...
Zusammenfassung der MySQL-Anweisungen
Inhaltsverzeichnis 1. Datenbank USE auswählen 2. ...
Analyse und Lösung der Ursache für den Verlust des Webseitenstils durch das automatische Ausfüllen von Formularen durch den Browser
Vom Backend zum Frontend: was für eine Tragödie. A...