淘宝搜索案例

实现大致步骤：

• 界面大致的UI结构
• 获取用户输入的搜索关键词，通过为输入框绑定 keyup 事件实现
• 封装getSuggestList()函数，获取搜索建议列表的代码
• 渲染建议列表的UI结构及渲染模板结构的函数renderSuggestList()
• 搜索关键词为空时隐藏搜索建议列表
• 实现输入框的防抖
• 缓存搜索的建议列表（如果第一次请求的内容和第二次请求的内容一样，那么就不再重新发起请求，而是沿用上一次的请求结果）

    <!-- 导入页面的基本样式 -->
    <link rel="stylesheet" href="./css/search.css" />
    <!-- 导入 jQuery -->
    <script src="./lib/jquery.js"></script>
    <!--导入 模板语法-->
    <script src="./lib/template-web.js"></script>

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

#suggest-list {
  border: 1px solid #ccc;
  display: none;
}

.suggest-item {
  line-height: 30px;
  padding-left: 5px;
}

.suggest-item:hover {
  cursor: pointer;
  background-color: #eee;
}

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

      <div class="box">
        <!-- tab 栏 -->
        <div class="tabs">
          <div class="tab-active">宝贝</div>
          <div>店铺</div>
        </div>
        <!-- 搜索区域（搜索框和搜索按钮） -->
        <div class="search-box">
          <input
            type="text"
            class="ipt"
            id="ipt"
            placeholder="请输入要搜索的内容"
          /><button class="btnSearch">搜索</button>
        </div>

        <!--搜索建议列表-->
        <div id="suggest-list"></div>
      </div>
    </div>

    <!--模板结构-->
    <script type="text/html" id="tpl-suggestList">
      {{each result}}
      <!--搜索建议项-->
      <div class="suggest-item">{{$value[0]}}</div>
      {{/each}}
    </script>

      $(function () {
        //1. 定义延时器 id
        let timer = null;

        //i.定义全局缓存对象
        let cacheObj = {};

        //2.定义防抖函数
        function debounceSearch(kw) {
          timer = setTimeout(function () {
            getSuggestList(kw);
          }, 500);
        }

        // 为输入框绑定 keyup 事件
        $("#ipt").on("keyup", function () {
          //3. 清空 timer
          clearTimeout(timer);

          //获取用户输入的数据
          const keywords = $(this).val().trim();

          //判断用户输入的内容是否为空
          if (keywords.length <= 0) {
            return $("#suggest-list").empty().hide();
          }

          // iv.先判断缓存中是否有数据
          if(cacheObj[keywords]){
              return renderSuggestList(cacheObj[keywords]);
          }

          //4. 调用防抖函数
          debounceSearch(keywords);
        });

        // 获取搜索建议列表
        function getSuggestList(kw) {
          $.ajax({
            url: "https://suggest.taobao.com/sug?q=" + kw,
            dataType: "jsonp",
            success: (res) => {
              //   console.log(res);
              renderSuggestList(res);
            },
          });
        }

        //渲染 UI 结构
        function renderSuggestList(res) {
          //判断有无需要渲染的数据
          if (res.result.length <= 0) {
            return $("#suggest-list").empty().hide();
          }

          const htmlStr = template("tpl-suggestList", res);
          $("#suggest-list").html(htmlStr).show();

          //ii. 获取到用户输入的内容，当做键
          let k = $("#ipt").val().trim();

          // iii.需要将数据作为值，进行缓存
          cacheObj[k] = res;
        }
      });