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)

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

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

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

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

#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;
}

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</script>

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

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

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

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

Then, we write in if:

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

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

Then, we write below:

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

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:

var newItemList = JSsearchByKeyWord(itemList,lastValue);
if(newItemList[0] == undefined){
   document.getElementById("search-recommend").innerHTML = "没有搜索结果";
}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:

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

itemList is a collection of all our products

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

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

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!