淘宝搜索案例的实现_可爱不能当饭吃

大大的周 02-07 2212

这个案例是我一开始接触前端就好奇的，现在终于知道是怎么做出来的了！

迫不及待想分享给大家！

实现步骤：?

1. 获取用户输入的搜索关键词：为了获取到用户每次按下键盘输入的内容，需要监听输入? ? ? ?框的 keyup 事件

2. 封装 getSuggestList 函数：将获取搜索建议列表的代码，封装到 getSuggestList 函数中

3. 渲染建议列表的UI结构： ? ? ?① 定义搜索建议列表 ? ? ?② 定义渲染模板结构的函数

4. 搜索关键词为空时隐藏搜索建议列表

5. 美化搜索建议列表

要引入的文件：jquery.js 和 template-web.js?

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; } HTML+JS代码：? <!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>  <link rel="stylesheet" href="./css/search.css" />  <script src="./lib/jquery.js"></script>  <script src="./lib/template-web.js"></script> </head> <body> <div class="container">  <img src="./images/taobao_logo.png" alt="" class="logo" /> <div class="box">  <div class="tabs"> <div class="tab-active">宝贝</div> <div>店铺</div> </div>  <div class="search-box"> <input id="ipt" type="text" class="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> <script> $(function () { // 1. 定义延时器的Id var timer = null // 定义全局缓存对象 var cacheObj = {} // 2. 定义防抖的函数 function debounceSearch(kw) { timer = setTimeout(function () { getSuggestList(kw) }, 500) } // 为输入框绑定 keyup 事件 $('#ipt').on('keyup', function () { // 3. 清空 timer clearTimeout(timer) var keywords = $(this).val().trim() if (keywords.length <= 0) { return $('#suggest-list').empty().hide() } // 先判断缓存中是否有数据 if (cacheObj[keywords]) { return renderSuggestList(cacheObj[keywords]) } // TODO:获取搜索建议列表 // console.log(keywords) // getSuggestList(keywords) debounceSearch(keywords) }) function getSuggestList(kw) { $.ajax({ url: 'https://suggest.taobao.com/sug?q=' + kw, dataType: 'jsonp', success: function (res) { // console.log(res) renderSuggestList(res) } }) } // 渲染UI结构 function renderSuggestList(res) { if (res.result.length <= 0) { return $('#suggest-list').empty().hide() } var htmlStr = template('tpl-suggestList', res) $('#suggest-list').html(htmlStr).show() // 1. 获取到用户输入的内容，当做键 var k = $('#ipt').val().trim() // 2. 需要将数据作为值，进行缓存 cacheObj[k] = res } }) </script> </body> </html>