Taobao-ähnliche JSsearch-Suche (ausführliches Tutorial)

Dieser Artikel bietet eine detaillierte Analyse der Verwendung von JSsearch, indem er die Art und Weise nachahmt, wie Taobao nach Schlüsselwörtern sucht und dann verwandte Produktsuchen herunterzieht

Wir geben zunächst den relevanten Quellcode des JSsearch-Programms an: https:// gitee.com/skyogo/JSsearch

Wir laden die Community-Version von JSsearch1.0 herunter

Nach dem Herunterladen laden wir eine Einkaufsseite ähnlich wie Taobao herunter

Wenn wir dann diese Seite öffnen, werden wir so etwas finden

Zu diesem Zeitpunkt schließen wir die Seite und kopieren unsere JSsearch.js in das Stammverzeichnis der Taobao-Seite Nachdem wir

in den js-Ordner kopiert haben, fügen wir es in die HTML-Seite ein (schreiben Sie es unten in den Text)

<script src="js/JSsearch.js"></script>
<script>
</script>

Dann fügen wir es in Zeile 76 oben ein ( unter dem Eingabe-Tag) Schreiben Sie diesen Code

<p id="search-recommend">
 没有搜索结果
</p>

Dann öffnen wir die Datei css/index.css und schreiben dieses CSS-Stylesheet

#search-recommend{
  height: 40px;
  width: 580px;
  position: absolute;
  top: 110px;
  border: 1px gray solid;
  padding-left: 20px;
  box-sizing: border-box;
  padding-top: 11px;
  font-size: 15px;
  cursor: pointer;
  background: white;
}

Führen Sie die HTML-Seite aus und stellen Sie fest, dass es eine zusätzliche Seite gibt unter dem Suchfeld A-Feld

An diesem Punkt ist unser HTML- und CSS-Code fertig. Als nächstes schreiben wir den JS-Code

Wir werden jetzt schließen Öffnen Sie die Seite und öffnen Sie die Entwicklungstools. Suchen Sie das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a in Zeile 2754 in index.html. Dann schreiben wir nun unseren Abfragecode hinein.

Zuerst schreiben wir diesen Code: (Wiederholen Sie Get the Wert im Eingabefeld)

var lastValue = document.getElementById("search-in").value;
setInterval(function(){   
},10)

Dann schreiben wir eine Beurteilungsaussage unter var, um festzustellen, ob sich der Wert des Eingabefelds geändert hat

if(lastValue != document.getElementById("search-in").value){          
}

Dann schreiben wir Folgendes ein:

lastValue = document.getElementById("search-in").value;

Dieser Absatz bedeutet wiederholte Beurteilung. Wenn sich der Wert des Eingabefelds ändert, dann weisen Sie ihn neu zu

Dann schreiben wir unten:

if(lastValue==null||lastValue==""){
  document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}else{
}

In diesem Absatz wird beurteilt, ob der aktuelle Der Wert des Eingabefelds ist leer, dann wird „Keine Suchergebnisse“ angezeigt.

Dann schreiben wir ein:

var newItemList = JSsearchByKeyWord(itemList,lastValue);
if(newItemList[0] == undefined){
   document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}else{ 
}

Zu diesem Zeitpunkt haben wir die Schlüsselwortsuchmethode von JSsearch aufgerufen. Übrigens haben wir das itemList-Array noch nicht geschrieben

Bewegen Sie nun den Cursor in die Zeile über setInterval und schreiben Sie:

var itemList = ["光能表","情侣表","日韩腕表","手表放心淘","瑞士表","陶瓷表","电子表","欧米茄","钢带表","皮带表","镂空机械表","斯沃琪","天梭","运动表","卡西欧","国表","时尚表","女表","儿童表","学生表","浪琴"];

itemList ist eine Sammlung aller unserer Produkte

Bewegen Sie nun den Cursor zurück zu else und schreiben Sie:

document.getElementById("search-recommend").innerHTML = newItemList[0];

Zu diesem Zeitpunkt öffnen wir die HTML-Datei erneut und geben sie in das Eingabefeld ein. Geben Sie den Inhalt ein und Sie werden feststellen, dass bereits eine Zuordnung besteht !

Natürlich ist dies nur ein Prototyp. Wir müssen noch einen Fehler beheben, das heißt, wenn Sie ein Zeichen eingeben, das in mehreren Zeichenfolgen enthalten ist, wird dies nicht der Fall sein Empfehlen Sie uns unbedingt das, was Sie möchten. Ich werde es hier nicht mehr schreiben. Wenn Sie diesen Fehler beheben möchten, können Sie ihn selbst beheben.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Beschreibung der Verwendung von Axios zur Lösung von HTTP-Anforderungsproblemen in vue2 (ausführliches Tutorial)

Durch die Verwendung von vue What Gibt es Methoden, um HighCharts-Diagramme in das Projekt einzuführen?

Verwendung von @HostBinding() und @HostListener() in Angular (ausführliches Tutorial)

Wie man mit Anzeigeproblemen vor dem Vue-Rendering umgeht (Detailliertes Tutorial)

Durch die Verwendung von ueditor im Vue-Projekt (Detailliertes Tutorial)

Durch die Einführung von noVNC-Remotedesktop in das Vue-Projekt Was sind die Schritte

Das obige ist der detaillierte Inhalt vonTaobao-ähnliche JSsearch-Suche (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!