Heim > Artikel > Web-Frontend > Nachahmung der Taobao JSsearch-Suche mit detaillierter Nutzungsanalyse im Dropdown-Menü
Dieser Artikel analysiert hauptsächlich die Verwendung von JSsearch, indem er Taobao-Suchschlüsselwörter nachahmt und dann verwandte Produktsuchen nach unten zieht. Lassen Sie uns mit dem Editor lernen.
Wir geben zunächst den relevanten Quellcode dieses JSsearch-Programms an: https://gitee.com/skyogo/JSsearch
Wir laden die JSsearch1.0-Community-Version herunter
Nach dem Herunterladen laden wir eine Einkaufsseite herunter, die Taobao ähnelt
Wenn wir dann diese Seite öffnen, werden wir so etwas finden
An dieser Stelle schließen wir die Seite und kopieren unsere JSsearch.js in den js-Ordner im Stammverzeichnis der Taobao-Seite
Nach dem Kopieren führen wir sie in die HTML-Seite ein (in „Write at the“) Unterseite des Körpers)
<script src="js/JSsearch.js"></script> <script> </script>
Dann schreiben wir diesen Code in Zeile 76 oben (unter dem Eingabe-Tag)
<p id="search-recommend"> 没有搜索结果 </p>
Dann öffnen wir die Datei css/index.css und schreiben dieses CSS-Stylesheet hinein
#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 haben das dort gefunden ist ein zusätzliches Feld unter dem Suchfeld
An diesem Punkt wurde unser HTML- und CSS-Code geschrieben. Als nächstes schreiben wir den JS-Code
Wir Schließen Sie nun die Seite, öffnen Sie die Entwicklungstools und suchen Sie das Tag