Imitation Taobao JSsearch search drop-down in-depth usage analysis-JS Tutorial-php.cn

This article mainly analyzes the usage of JSsearch by imitating Taobao's search for keywords and then pulling down related product searches. Let's learn with the editor.

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

We download 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 point we close the page and copy our JSsearch.js to the js folder in the root directory of the Taobao page

After copying, we introduce it in the html page (in Write at the bottom of body)

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

Copy after login

Then we write this code in line 76 above (below the input tag)

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

Copy after login

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

#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 the search box below There is an extra box

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

We will now add the page Close, open the development tools, and find the