Taobao-like JSsearch search (detailed tutorial)-JS Tutorial-php.cn

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>

Copy after login

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

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

Copy after login

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

Copy after login

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