Taobao-like JSsearch search (detailed tutorial)

This article provides an in-depth analysis of the usage of JSsearch by imitating the way Taobao searches for keywords and then pulls down related product searches.

We first give the relevant source code of the JSsearch program: https:// gitee.com/skyogo/JSsearch

We download the JSsearch1.0 Community version

After downloading, we will download a shopping page similar to Taobao

Then, when we open this page, we will find something like this

At this time we close the page and copy our JSsearch.js to the root directory of the Taobao page js folder

After copying it, we introduce it into the html page (write it at the bottom of the body)

Then we add it to line 76 above (below the input tag) Write this code

Then we open the css/index.css file and write this css style sheet

Run the html page and find that there is an extra page under the search box A box

At this point, our html and css code has been written. Next, let’s write the js code

We will now close the page and open it Development tools, find the <script> tag about line 2754 in index.html, then we will now write our query code in it

First, we write this code: (Repeat Get the value in the input box)

Then, we write a judgment statement under var to determine whether the value of the input box has changed

Then, we write in if:

This paragraph means repeated judgment. If the value of the input box changes, then reassign it

Then, we write below:

This paragraph is to judge that if the current value of the input box is empty, then let it display "No search results"

Then, we write in else:

At this time, We called JSsearch's keyword search method. Oh, by the way, we haven't written the itemList array yet

At this time, move the cursor to the line above setInterval and write:

itemList is a collection of all our products

Now move the cursor back, move it to else, and write:

At this time, we open the html file again and enter it in the input box Enter the content and you will find that there is already an association!

Of course, this is just a prototype. We still have a BUG to solve, that is, when you enter a character that is contained in multiple strings, it will not necessarily Recommend the one you want. JSsearch has already thought about this for us. I won’t write it here anymore. If you want to solve this BUG, ​​you can refer to the JSsearch documentation to solve it yourself!

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed description of using axios to solve http request problems in vue2 (detailed tutorial)

By using axios in vue2 What are the methods to introduce highcharts charts into the project?

Usage of @HostBinding() and @HostListener() in Angular (detailed tutorial)

How to deal with display issues before vue rendering (Detailed tutorial)

By using ueditor in the vue project (Detailed tutorial)

By introducing noVNC remote desktop into the vue project What are the steps

The above is the detailed content of Taobao-like JSsearch search (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!