jQuery-Plugin zur Implementierung des Suchverlaufs

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.
2. Anschließend wird der Verlaufsteil im localStorage gespeichert, an der entsprechenden Aktionsstelle in den entsprechenden Effekt verarbeitet und wieder in DOM eingefügt

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:
  • Baidu-Suchfeld-Effektcode basierend auf jQuery
  • Implementierung einer automatischen Suchschlüsselwort-Matching-Funktion basierend auf jQuery

<<:  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 implementieren Sie einen reibungslosen Neustart von Nginx

1. Hintergrund Während des Serverentwicklungsproz...

vite2.x implementiert das On-Demand-Laden von Ant-Design-Vue@next-Komponenten

1. Version verwenden vite:2.0 Ant-Design-Vue: 2.0...

Entwicklungsdetails von Vue3-Komponenten

Inhaltsverzeichnis 1. Einleitung 2. Komponentenen...

Detaillierte Schritte zur Installation von Docker mongoDB 4.2.1 und zum Sammeln von Springboot-Protokollen

1: Installieren Sie MongoDB im Docker Schritt 1: ...

Detaillierte Erklärung der HTML-Download-Funktion

Das neue Projekt ist im Grunde abgeschlossen. Es ...

So setzen Sie das Passwort zurück, wenn Sie es in MySQL8 vergessen haben (die alte MySQL-Methode funktioniert nicht)

Die Befehlszeile mysqld –skip-grant-tables kann i...

So implementieren Sie eine verschachtelte if-Methode in Nginx

Nginx unterstützt weder verschachtelte if-Anweisu...

Übung zum dynamischen Erstellen von Dialogen entsprechend dem Dateinamen in vue+el-element

Inhaltsverzeichnis Hintergrund erreichen 1. Gekap...

Perfekte Lösung für das Problem, dass Daten abgeschnitten werden, wenn die Funktion „group concat“ in Mysql5.7 verwendet wird

Vorgestern stieß ich in der Produktionsumgebung a...

Installieren Sie MySQL offline mit RPM unter CentOS 6.4

Verwenden Sie das RPM-Installationspaket, um MySQ...

So erstellen Sie einen Styleguide für Ihre Website im Webinterface-Design (mit Bildern und Text)

Was ist ein Styleguide? Einfach ausgedrückt handel...

Verwenden Sie natives JS, um den Scroll-Effekt des Live-Bullet-Bildschirms zu simulieren

Inhaltsverzeichnis 1. Grundprinzipien 2. Spezifis...

Der Unterschied zwischen der Speicherung von Zeichen mit voller Breite und Zeichen mit halber Breite in MySQL

Leider trat der Fehler MYSQL_DATA_TRUNCATED währe...

Dockerfile echo gibt die Methode zum Implementieren mehrerer Textzeilen in der angegebenen Datei an

Fügen Sie der angegebenen Datei im Dockerfile meh...

So installieren Sie Docker auf einem Linux-System und melden sich über SSH beim Docker-Container an

Hinweis: Ich verwende Centos, um Docker zu instal...