JavaScript zum Implementieren der Anzeige von Suchdaten

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 float：left； festlegen.

Für die abgerundeten Ränder auf der linken und rechten Seite der beiden Div-Boxen müssen wir Werte für border-top-left-radius usw. festlegen, damit wir den Stil des Suchfelds grob ermitteln können. Die restlichen Details können im Code angezeigt werden~

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 onkeyup aufrufen, um zuerst den Anzeigeattributwert des Suchfelds darunter auf Blockieren zu setzen.
Rufen Sie dann forEach auf, um alle Daten im Array zu durchlaufen, den Eingabeinhalt über den Wert abzurufen und indexOf aufzurufen, um den Inhalt mit den Daten im Array zu vergleichen . Wenn eine Übereinstimmung vorliegt, ist der Rückgabewert der Index der Daten im Array, andernfalls ist er -1.
Wenn eine Übereinstimmung vorliegt, können wir mit innerHTML ein p-Tag in das Anzeigefeld unten einfügen. Der Inhalt in p sind die übereinstimmenden Daten. Wenn keine Übereinstimmung vorliegt, wird ein p-Tag mit dem Inhalt „Noch keine Daten“ zurückgegeben.

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:
  • js zur Implementierung der Tabellendatensuche
  • Sortieren und Durchsuchen von JSON-Daten mit JavaScript
  • JS-Methode zur Realisierung verschiedener Suchfunktionen für Tabellendaten

<<:  202 kostenlose, hochwertige XHTML-Vorlagen (2)

>>:  Zusammenfassung häufig verwendeter Befehle für die Einreichung von Docker-Wettbewerben

Artikel empfehlen

Erläuterung des Arbeitsmechanismus von Namenode und SecondaryNameNode in Hadoop

1) Prozess 2) FSImage und Bearbeitungen Nodenode ...

So führen Sie py-Dateien direkt unter Linux aus

1. Erstellen Sie zuerst die Datei (wechseln Sie p...

Wissenspunkte und Nutzungsdetails zu globalen Variablen und globalen Objekten von Nodejs

1. Globales Objekt Alle Module können aufgerufen ...

Eine kurze Analyse der zugrunde liegenden Prinzipien von MySQL-Transaktionen und Isolationsebenen

Inhaltsverzeichnis Vorwort 1. Kurze Analyse der z...

So ändern Sie die Längenbeschränkung von group_concat in MySQL

In MySQL gibt es eine Funktion namens „group_conc...

LayUI+Shiro implementiert ein dynamisches Menü und erinnert sich an das Beispiel der Menüerweiterung

Inhaltsverzeichnis 1. Maven-Abhängigkeit 2. Menüb...

MySQL 8.0 DDL-Atomaritätsfunktion und Implementierungsprinzip

1. Übersicht über die Atomizität von DDL Vor 8.0 ...

MySQL-Integritätsbeschränkungen – Definition und Beispiel-Tutorial

Inhaltsverzeichnis Integritätsbeschränkungen Defi...

Beispielcode zur Implementierung der Ellipsenbahnrotation mit CSS3

In letzter Zeit müssen folgende Effekte erzielt w...

Webdesign-Tipps für Formular-Eingabefelder

1. Gestricheltes Feld, wenn die Abbrechen-Schaltfl...

Ein einfaches Beispiel zur Implementierung einer Fuzzy-Abfrage in Vue

Vorwort Die sogenannte Fuzzy-Abfrage dient dazu, ...

Detaillierte Erklärung der Destrukturierungszuweisung in JavaScript

Inhaltsverzeichnis Konzept Array-Destrukturierung...

Linux-Konfiguration ohne Passwort-Login, eigenständige und vollständige Distribution, ausführliches Tutorial

Inhaltsverzeichnis 1: Kennwortfreie Anmeldekonfig...

So verwalten Sie Docker über die Benutzeroberfläche

Docker wird in immer mehr Szenarien verwendet. Fü...

CSS Houdini erzielt einen dynamischen Welleneffekt

CSS Houdini gilt als die aufregendste Innovation ...