淘宝搜索案例的实现

22次阅读
没有评论

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

迫不及待想分享给大家!

淘宝搜索案例的实现

淘宝搜索案例的实现

实现步骤:

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

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

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

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

5. 美化搜索建议列表

要引入的文件:jquery.jstemplate-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" /> <!-- 导入 jQuery --> <script src="./lib/jquery.js"></script> <!-- 导入模板引擎 --> <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 栏 --> <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>

淘宝搜索案例的实现

czmtmvmw
版权声明:本站原创文章,由 czmtmvmw 2022-07-18发表,共计3166字。
转载说明:除特殊说明外本站文章皆由乐买号发布,转载请注明出处。
评论(没有评论)