JS implementiert das Baidu-Suchfeld
|
In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung des Baidu-Suchfelds zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt UmsetzungsprinzipBei der dynamischen Eingabe von Schlüsselwörtern in das Eingabefeld wird das aktuelle Schlüsselwort als Wert nach dem Fragezeichen-Parameter verwendet. Da die Schnittstelle von Baidu domänenübergreifend verwendet wird, wird über JSONP eine domänenübergreifende Ajax-Anforderung erstellt. Die Callback-Funktion verarbeitet den Rückgabewert. Ich habe versucht, die Schnittstelle von Baidu zu studieren und habe festgestellt, dass die nativen XHR-Schnittstellenparameter etwas kompliziert sind (Baidu hätte viele Situationen berücksichtigen sollen). Ich habe eine 2345-Navigation gefunden, zufällig einen Buchstaben s in das Eingabefeld eingegeben, Netzwerk geöffnet und festgestellt, dass es auch eine Anfrage an eine Adresse von Baidu gesendet hat. Das „&wd=s“ nach dem Fragezeichen hat dieses Schlüsselwort gesendet, und „&cb=“ sollte die Rückrufverarbeitungsfunktion sein, und ihr Typ ist auch Skript. Die 2345-Navigation sollte auch Daten von Baidu über JSONP abrufen.
var Skript = document.createElement("Skript");
Skript.src =
"https://www.baidu.com/su?&wd=" +
encodeURI(diesen.Wert.trim()) +
"&p=3&cb=HandleVorschlag";
Dokument.Body.AppendChild(Skript);Ich habe auf diese Anfrage geklickt und die zurückgegebenen Daten gesehen. Das Ergebnis wird in Form eines Objekts zurückgegeben. q entspricht dem Suchbegriff und s entspricht den zurückgegebenen Ergebnissen (in Array-Form)
Später müssen Sie nur noch das Li-Tag dynamisch erstellen, den Inhalt darin festlegen und auf andere Details achten. 1. Verwenden Sie Flex-Layout, um eine horizontale und vertikale Zentrierung des Suchfelds zu erreichen. Nachdem ich das Flex-Attribut festgelegt hatte, stellte ich fest, dass es horizontal und vertikal nicht zentriert war. Zu diesem Zeitpunkt legte ich die Höhe des übergeordneten Felds auf 100 % fest und stellte fest, dass es zentriert werden kann, wenn ich die Höhe auf einen bestimmten Wert einstelle. Ich vermutete, dass die Einstellung für die Höhe in % ungültig war. Ich habe es überprüft und festgestellt, dass die prozentuale Höhe relativ zum übergeordneten Feld ist, also zum Hauptteil. Standardmäßig ist für HTML und Body keine Höhe festgelegt. Darüber hinaus beträgt im Layout bei Blockfeldern ohne festgelegte Breite und Höhe die Breite standardmäßig 100 % und die Höhe wird automatisch durch den darin enthaltenen Inhalt erweitert. 2. Holen Sie sich zuerst die häufig verwendeten DOM-Knoten, um häufige nachfolgende Abfragen und Vorgänge am DOM zu vermeiden. 3. Um zu vermeiden, dass während des Eingabevorgangs häufig Anfragen gesendet werden (wenn Sie schnell tippen), wird die Anfragefunktion gedrosselt und das Intervall auf 130 ms eingestellt, was genau richtig ist. Wenn die Zeit länger ist, entsteht ein Gefühl der Verzögerung. Die Pfeilfunktion in ES6 wird verwendet, um das Problem dieses Zeigens in setTimeout zu vermeiden. 4. In der Rückruffunktion:
5. Da li dynamisch erstellt wird, wird das Event-Bubbling-Prinzip zum Delegieren von Ereignissen verwendet, wenn Sie auf das li-Tag oder auf „Suchen“ klicken, um zur Suche zu Baidu zu springen. Kompatibilitätsprobleme werden hier nicht berücksichtigt: e = e || Fenster.Ereignis; Ziel = e.Ziel || e.Quellelement; 6. Zusätzlich zu Klickereignissen werden auch Tastaturereignisse – die Eingabetaste und die Auf- und Ab-Tasten – für die Ereignisdelegierung registriert. Abschließend können Sie mit den Auf- und Ab-Tasten der Tastatur und der Maus eine Auswahl treffen und mit einem Klick auf „Suchen“ oder der Eingabetaste zur Suche springen. Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<!-- Kompatibilitätsansicht -->
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<meta content="Bequemere und schnellere Suche, dadurch doppelte Ergebnisse mit halbem Aufwand" name="description">
<title>gewünschte Suche</title>
<Stil>
html {
Höhe: 100%;
}
Körper {
Hintergrund: #f0f3ef;
Höhe: 100%;
}
.container {
Höhe: 100%;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Flex-Richtung: Spalte;
}
.bgDiv {
Box-Größe: Rahmenbox;
Breite: 595px;
Höhe: 55px;
Position: relativ;
/* Position: absolut;
links: 50%;
oben: 50 %;
transformieren: übersetzen(-50 %, -50 %); */
}
.Sucheingabetext {
Rand: 1px durchgezogen #b6b6b6;
Breite: 495px;
Hintergrund: #fff;
Höhe: 33px;
Zeilenhöhe: 33px;
Schriftgröße: 18px;
Polsterung: 3px 0 0 7px;
}
.Sucheingabeschaltfläche {
Breite: 90px;
Höhe: 38px;
Farbe: #fff;
Schriftgröße: 16px;
Buchstabenabstand: 3px;
Hintergrund: #3385ff;
Rand: 0,5px durchgezogen #2d78f4;
Rand links: -5px;
vertikale Ausrichtung: oben;
Deckkraft: .9;
}
.Sucheingabeschaltfläche:hover {
Deckkraft: 1;
Kastenschatten: 0 1px 1px #333;
Cursor: Zeiger;
}
.vorschlagen {
Breite: 502px;
Position: absolut;
oben: 38px;
Rand: 1px durchgezogen #999;
Hintergrund: #fff;
Anzeige: keine;
}
.suggest ul {
Listenstil: keiner;
Rand: 0;
Polsterung: 0;
}
.suggest ul li {
Polsterung: 3px;
Schriftgröße: 17px;
Zeilenhöhe: 25px;
Cursor: Zeiger;
}
.suggest ul li:hover {
Hintergrundfarbe: #e5e5e5
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div Klasse="bgDiv">
<input type="text" class="search-input-text" value="" autofocus placeholder="Schlüsselwort">
<input type="button" value="Suchen" class="search-input-button" id="btn">
<div Klasse="vorschlagen">
<ul id="Suchergebnis">
</ul>
</div>
</div>
</div>
<Skript>
var suggestContainer = document.getElementsByClassName("suggest")[0];
var searchInput = document.getElementsByClassName("Sucheingabetext")[0];
var bgDiv = document.getElementsByClassName("bgDiv")[0];
var searchResult = document.getElementById("Suchergebnis");
// Inhalt des Vorschlagskastens löschen function clearContent() {
var Größe = Suchergebnis.childNodes.Länge;
für (var i = Größe - 1; i >= 0; i--) {
SucheResult.removeChild(SucheResult.childNodes[i]);
}
};
var Timer = null;
//Registriere das Tastatur-Lift-Ereignis im Eingabefeld searchInput.onkeyup = function (e) {
suggestContainer.style.display = "Block";
// Wenn der Inhalt des Eingabefelds leer ist, löschen Sie den Inhalt. Es ist keine domänenübergreifende Anforderung erforderlich, wenn (this.value.length === 0) {
Inhalt löschen();
zurückkehren;
}
wenn (dieser.Timer) {
: LöscheTimeout(diesen.Timer);
}
wenn (e.keyCode !== 40 && e.keyCode !== 38) {
// Optimierung der Funktionsdrosselung this.timer = setTimeout(() => {
// Skript-Tag JSONP domänenübergreifend erstellen var script = document.createElement("script");
script.src = "https://www.baidu.com/su?&wd=" + encodeURI(this.value.trim()) +
"&p=3&cb=HandleVorschlag";
Dokument.Body.AppendChild(Skript);
}, 130)
}
};
// Rückruffunktion handleSuggestion(res) {
// Lösche die vorherigen Daten! !
Inhalt löschen();
var Ergebnis = Res.s;
// Die ersten fünf Suchvorschläge abfangen if (result.length > 4) {
Ergebnis = Ergebnis.Slice(0, 5)
}
für (lass i = 0; i < Ergebnis.Länge; i++) {
//Li-Tag dynamisch erstellen var liObj = document.createElement("li");
liObj.innerHTML = Ergebnis[i];
Suchergebnis.appendChild(liObj);
}
// Selbstausführende anonyme Funktion - Löschen Sie das für Cross-Domains verwendete Skript-Tag (Funktion () {
var s = document.querySelectorAll('Skript');
für (var i = 1, len = s.length; i < len; i++) {
Dokument.Body.RemoveChild(s[i]);
}
})()
}
Funktion Sprungseite() {
Fenster.öffnen(`https://www.baidu.com/s?word=${encodeURI(searchInput.value)}`);
}
// Der Ereignisdelegat klickt auf das li-Tag oder die Suchschaltfläche, um zur Baidu-Suchseite zu springen bgDiv.addEventListener("click", function (e) {
wenn (e.target.nodeName.toLowerCase() === 'li') {
var Schlüsselwörter = e.target.innerText;
searchInput.value = Schlüsselwörter;
Sprungseite();
} sonst wenn (e.target.id === 'btn') {
Sprungseite();
}
}, FALSCH);
var i = 0;
Var-Flagge = 1;
// Ereignisdelegierung zum Abhören von Tastaturereignissen bgDiv.addEventListener("keydown", function (e) {
var Größe = Suchergebnis.childNodes.Länge;
wenn (e.keyCode === 13) {
Sprungseite();
};
//Tastatur gedrückt eventif (e.keyCode === 40) {
wenn (Flag === 0) {
ich = ich + 2;
}
Flagge = 1;
e.preventDefault();
if (i >= Größe) {
ich = 0;
}
wenn (i < Größe) {
searchInput.value = searchResult.childNodes[i++].innerText;
}
};
//Tastatur hoch eventif (e.keyCode === 38) {
wenn (Flagge === 1) {
ich = ich - 2;
}
Flagge = 0;
e.preventDefault();
wenn (i < 0) {
i = Größe - 1;
}
wenn (i > -1) {
searchInput.value = searchResult.childNodes[i--].innerText;
}
};
}, FALSCH);
// Klicken Sie irgendwo anders auf der Seite, um das Suchergebnisfeld auszublenden. document.onclick = () => clearContent()
</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:
|
<<: So installieren und konfigurieren Sie den Apache-Webserver
>>: So erhalten Sie Datums-/Uhrzeitdaten in MySQL, gefolgt von .0
Artikel empfehlen
Beispielcode zum automatischen Umbrechen des Pre-Tags
Das Pre-Element definiert vorformatierten Text. In...
Windows kann den MySQL-Dienst nicht starten und meldet Fehler 1067 – Lösung
Als ich mich bei MySQL anmeldete, wurde mir plötz...
Implementieren der Prioritätswarteschlange in JavaScript
Inhaltsverzeichnis 1. Einführung in die Priorität...
htm-Anfängerhinweise (unbedingt für Anfänger lesen)
1. Was ist HTML HTML (HyperText Markup Language):...
So löschen Sie Standardformate und legen allgemeine Formate in CSS fest
CSS Standard-Stile löschen Die üblichen klaren St...
Vue2.x - Beispiel für die Verwendung von Anti-Shake und Throttling
Inhaltsverzeichnis Dienstprogramme: Verwendung in...
Docker-Netzwerkmodus und Konfigurationsmethode
1. Docker-Netzwerkmodus Wenn Docker Run einen Doc...
Wie MySQL Milliarden von Datenverkehr unterstützt
Inhaltsverzeichnis 1 Master-Slave-Lese-/Schreibtr...
Detaillierte Erklärung der React-Ereignisbindung
1. Was ist In react Anwendungen werden Ereignisna...
JavaScript ermittelt, ob der Browser IE ist
Als Frontend-Entwickler komme ich an den Tücken d...
Der MySQL-Server läuft mit der Option --read-only und kann diese Anweisung daher nicht ausführen.
Ich war in einer Besprechung, als ein Kollege anr...
Nginx löst Cross-Domain-Probleme und bindet Seiten von Drittanbietern ein
Inhaltsverzeichnis Vorwort Schwierigkeit Domänenü...
Implementierung der Nginx-Konfiguration und des Zugriffs auf lokale statische Ressourcen in der Mac-Umgebung
Manchmal erfordert die lokale Entwicklung das Deb...
Lösung für das Routing-Hervorhebungsproblem von Vue-Komponenten
Vorwort Früher habe ich den Cache verwendet, um d...
Implementierung der Docker-Bereitstellung des SQL Server 2019 Always On-Clusters
Inhaltsverzeichnis Docker-Bereitstellung Always o...