jQuery-Plugin zur Implementierung des Suchverlaufs
|
Jeden Tag ein jQuery-Plugin – um einen Suchverlauf zu erstellen. Zu Ihrer Information: Der spezifische Inhalt lautet wie folgt Die Wirkung ist wie folgt
Codeabschnitt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Suchverlauf ausführen</title>
<script src="js/jquery-3.4.1.min.js"></script>
<Stil>
*{
Rand: 0px;
Polsterung: 0px;
}
#Suchfeld{
/* Rand: 1px durchgehend hellgrau; */
Höhe: 40px;
Breite: 720px;
Position: relativ;
}
#Sucheingabe{
Rand: 1px durchgehend hellgrau;
Rahmenradius: 5px 0px 0px 5px;
Höhe: 28px;
Position: absolut;
rechts: 45px;
oben: 5px;
links: 5px;
Breite: 670px;
Gliederung: keine;
Texteinzug: 12px;
Schriftgröße: 12px;
Farbe: grau;
}
#Sucheingabe:Fokus{
Rahmenfarbe: RGB (252,25,68);
}
#Sucheingabe:Fokus~#morebox{
Anzeige: Flex;
}
#suchebtn{
Höhe: 30px;
Breite: 40px;
Rand: keiner;
Rahmenradius: 0px 5px 5px 0px;
Hintergrundfarbe: rgb(252,25,68);
Position: absolut;
rechts: 5px;
oben: 5px;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Cursor: Zeiger;
}
#searchbtn img{
Breite: 25px;
Höhe: 25px;
}
#mehrbox{
Rand: 1px durchgehend hellgrau;
Position: absolut;
oben: 40px;
links: 5px;
rechts: 5px;
Höhe: 370px;
Z-Index: 7;
Rahmenradius: 2px;
Anzeige: Flex;
Anzeige: keine;
}
#drücken{
biegen: 1;
/* Rand: 1px durchgehend hellgrau; */
Position: relativ;
}
#Geschichte{
/* Anzeige: keine; */
biegen: 1;
/* Rand: 1px durchgehend hellgrau; */
Position: relativ;
}
.Kopf{
Position: absolut;
oben: 0px;
Breite: 100 %;
Höhe: 30px;
Rahmen unten: 1px durchgehend hellgrau;
Schriftgröße: 12px;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Texteinzug: 12px;
Farbe: rgb(252,85,49);
}
.hauptsächlich{
Position: absolut;
oben: 30px;
Breite: 100 %;
unten: 0px;
Überlauf-x: versteckt;
Überlauf-y: automatisch;
}
.Artikel{
Schriftgröße: 12px;
Höhe: 30px;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Texteinzug: 12px;
Cursor: Zeiger;
}
.item:hover{
Hintergrundfarbe: hellgrau;
}
</Stil>
</Kopf>
<Text>
<div id="Suchfeld">
<input id="searchinput" placeholder="c" />
<button id="searchbtn"><img src="img/sc.png"></button>
<div id="mehrbox">
<div id="Geschichte">
<div class="head">Suchverlauf</div>
<div Klasse="main"></div>
</div>
<div id="drücken">
<div class="head">Heiße Empfehlungen</div>
<div Klasse="Haupt">
<div class="item">Microsoft hat endlich Maßnahmen gegen JDK ergriffen</div>
<div class="item">Xiaomi-Technologie zum kabellosen Laden</div>
<div class="item">Häufige Linux-Befehle</div>
<div class="item">A Fei arbeitet hart und kann gut schreiben</div>
<div class="item">Lernen Sie jeden Tag ein jQuery-Plugin und es gibt keine Plugins! Ist es der Verfall der Moral oder die Verzerrung der menschlichen Natur?
</div>
</div>
</div>
</div>
</body>
</html>
<Skript>
$(Dokument).bereit(Funktion(){
//Jedes Mal, wenn Sie auf die Suche klicken, wird sie im Cache gespeichert//
$(".item").klick(function(){
var str = $(dieser).text();
$("#Sucheingabe").val(str)
})
// localStorage["history"] = '[]'//Cache leeren;
Zeichenhistorie();
$("#searchbtn").klick(function(){
var str = $("#searchinput").val();
wenn(str&&str!=""){
var arr = getSession();
arr.push(str);
localStorage["Verlauf"] = JSON.stringify(arr);
Zeichenhistorie();
}
})
getSession();
//Finden Sie den Verlauf basierend auf dem Cache und generieren Sie dann die Suchverlaufsfunktion drawhistory(){
var arr = getSession();
$("#history .main .item").entfernen();
arr.fürJeden(item=>{
var $item = $("<div class='item'>"+item+"</div>");
$item.appendTo($("#history .main"));
})
}
//Cache abrufen Funktion getSession(){
var ses = localStorage["Verlauf"];
var arr = ses==undefined?[]:JSON.parse(ses);
Rückflug an;
}
})
</Skript>Erklärung der Ideen 1. Das Layout ist ein Fehler. Ich weiß nicht, ob mein Layout das geeignetste ist, aber es sieht gut aus. 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:
|
<<: Zusammenfassung der Methoden zum Überprüfen, ob der Port in Linux geöffnet ist
>>: MySQL 5.6 Installationsschritte mit Bildern und Text
Artikel empfehlen
So zeigen Sie alle laufenden Prozesse in Linux an
Sie können den Befehl ps verwenden. Es kann relev...
Eine kurze Analyse der startReactApplication-Methode von React Native
In diesem Artikel haben wir den Startvorgang von ...
VMware Workstation ist nicht mit Device/Credential Guard kompatibel
Beim Installieren einer virtuellen Maschine wird ...
So installieren Sie die Odoo12-Entwicklungsumgebung unter Windows 10
Vorwort Da viele Freunde sagen, dass sie keinen M...
So starten Sie ein Java-Programm im Docker
Erstellen Sie ein einfaches Spring Boot-Webprojek...
So verwenden Sie die Form-Komponente von Antd in React, um Formularfunktionen zu implementieren
1. Bauteile 1. Ein Formular muss Formularfelder e...
Beheben Sie das Problem, dass einige Konfigurationsdateien in /etc nach dem Neustart des Docker-Containers zurückgesetzt werden
1. Die drei Dateien /etc/hosts, /etc/resolv.conf ...
Beispielschritte zum Implementieren von Klassenselektoren und Namensattributselektoren in js
Das Aufkommen von jQuery hat unsere Effizienz bei...
Der Unterschied zwischen redundanten und doppelten Indizes in MySQL
MySQL ermöglicht das Erstellen mehrerer Indizes f...
Docker-Container greift auf MySQL-Operationen des Hosts zu
Hintergrund: Es gibt ein Flask-Projekt, das eine ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17
In diesem Artikel wird die Installations- und Kon...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13
In diesem Artikel finden Sie das Installations- u...
MySQL 5.7.17 Installations-Tutorial mit Lösungen für das Problem, dass der MySQL-Dienst nicht gestartet werden kann
Bei der .net-Entwicklung bin ich eher mit der SQL...
Über gutes Design
<br />Auf zehntausend Personen, die die Frag...
Lösung zum automatischen Neustart von MySQL
Vorwort Kürzlich trat in der Testumgebung ein Pro...