当前位置：网站首页>Taobao Search case

Taobao Search case

2022-07-25 23:27:00 【Dragon eyes】

Case analysis steps

Case title
Insert picture description here

Case implementation code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!--  Import the basic style of the page  -->
    <link rel="stylesheet" href="./css/search.css" />
    <!--  Import  jQuery -->
    <script src="./lib/jquery.js"></script>
    <!--  Import template engine  -->
    <script src="./lib/template-web.js"></script>
</head>

<body>
    <div class="container">
        <!-- Logo -->
        <img src="./images/taobao_logo.png" alt="" class="logo" />

        <div class="box">
            <!-- tab  bar  -->
            <div class="tabs">
                <div class="tab-active"> baby </div>
                <div> The store </div>
            </div>
            <!--  Search area （ Search box and search button ） -->
            <div class="search-box">
                <input type="text" id="ipt" class="ipt" placeholder=" Please enter what you want to search for " /><button class="btnSearch">
                     Search for 
                </button>
            </div>
            <!--  Search suggestion list  -->
            <div id="suggest-list"></div>
        </div>
    </div>
    <!--  Formwork structure  -->
    <script type="text/html" id="tpl-suggestList"> <!--  Cyclic grammar , Loop server data  --> {
      {
      each result}} <!--  Search suggestions  --> <div class="suggest-item">{
      {
      $value[0]}}</div> {
      {
      /each}} </script>
    <script> $(function() {
       // 1. Defines the of the delayer ID var timer = null //  Define global cache objects  var cacheObj = {
      } //  Define the anti shake function  function debounceSearch(kw) {
       timer = setTimeout(function() {
       getSuggestList(kw) }, 500) } //  Bind... To the input box keyup event  $('#ipt').on('keyup', function() {
       // 3. It's triggering keyup When an event is , Empty it immediately timer clearTimeout(timer) //  Get the user's input val() Get input ,trim() Remove the spaces at both ends  var keywords = $(this).val().trim() //  Judge whether the user input is empty  if (keywords.length <= 0) {
       //  If the keyword is empty , Hide the search suggestion list after clearing  return $('#suggest-list').empty().hide() } //  First determine whether there is data in the cache  if (cacheObj[keywords]) {
       return renderSuggestList(cacheObj[keywords]) } // TODO: Get a list of search suggestions  // console.log(keywords); // getSuggestList(keywords); debounceSearch(keywords); }) //  encapsulation getSuggestlist function , Get a list of search suggestions  function getSuggestList(kw) {
       $.ajax({
       //  Specify the requested URL Address , among q Is the keyword entered by the user  url: 'https:suggest.taobao.com/sug?q=' + kw, //  Specify which JSONP request  dataType: 'JSONP', //  Successful callback function  success: function(res) {
       // console.log(res); renderSuggestList(res) } }) } //  Rendering UI structure  function renderSuggestList(res) {
       if (res.result.length <= 0) {
       return $('#suggest-list').empty().hide() // Clear hidden  } //  Render template structure  var htmlStr = template('tpl-suggestList', res) $('#suggest-list').html(htmlStr).show() // 1. Get the user's input , As a key  k var k = $('#ipt').val().trim() // 2. You need to take the data as a value , Cache  cacheObj[k] = res } }) </script>
</body>

</html>

search.css

.container {
    
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}

.logo {
    
  width: 225px;
  height: 65px;
  margin: 50px 0;
}

.tabs {
    
  display: flex;
}
.tabs > div {
    
  width: 55px;
  height: 23px;
  line-height: 23px;
  text-align: center;
  cursor: pointer;
}

.tabs > div:hover {
    
  text-decoration: underline;
  color: #ff5700;
}

.tab-active {
    
  background-color: #ff5700;
  font-weight: bold;
  color: white;
}

.tabs > .tab-active:hover {
    
  color: white;
  text-decoration: none;
}

.search-box {
    
  display: flex;
  align-items: center;
}

.search-box .ipt {
    
  box-sizing: border-box;
  width: 500px;
  height: 34px;
  line-height: 30px;
  margin: 0;
  padding: 0;
  padding-left: 5px;
  outline: none;
  border: 2px solid #ff5700;
}

.btnSearch {
    
  margin: 0;
  height: 34px;
  border: none;
  background-color: #ff5700;
  color: white;
  letter-spacing: 1em;
  text-align: center;
  width: 90px;
  padding-bottom: 5px;
  outline: none;
  cursor: pointer;
}

.btnSearch:hover {
    
  opacity: 0.9;
}
/*  Search suggestion list  */
#suggest-list{
    
  border: 1px solid #ccc;
  display: none;
}
.suggest-item{
    
  line-height: 30px;
  padding-left: 5px;
}
.suggest-item:hover{
    
  /*  The mouse becomes smaller by  */
  cursor:pointer;
  background-color: #eee;
}