淘宝搜索案例

最新推荐文章于 2024-06-10 21:57:03 发布

龙眸

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量186

点赞数

分类专栏：笔记文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_52065872/article/details/125846722

版权

笔记专栏收录该内容

73 篇文章 1 订阅

订阅专栏

案例分析步骤

案例题目
在这里插入图片描述

案例实现代码

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>
    <!-- 导入页面的基本样式 -->
    <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 type="text" id="ipt" 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 = {}
            // 定义防抖的函数
            function debounceSearch(kw) {
                timer = setTimeout(function() {
                    getSuggestList(kw)
                }, 500)
            }
            // 为输入框绑定keyup事件
            $('#ipt').on('keyup', function() {
                // 3.在触发keyup事件时，立即清空timer
                clearTimeout(timer)
                // 获取用户输入的内容val()获取输入内容，trim()去除两端空格
                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);
            })
            // 封装getSuggestlist函数，获取搜索建议列表
            function getSuggestList(kw) {
                $.ajax({
                    // 指定请求的URL地址，其中q是用户输入的关键字
                    url: 'https:suggest.taobao.com/sug?q=' + kw,
                    //  指定要发起的JSONP请求
                    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.获取用户输入的内容，当做键 k
                var k = $('#ipt').val().trim()
                // 2.需要将数据作为值，进行缓存
                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;
}
/* 搜索建议列表 */
#suggest-list{
  border: 1px solid #ccc;
  display: none;
}
.suggest-item{
  line-height: 30px;
  padding-left: 5px;
}
.suggest-item:hover{
  /* 鼠标经过变小手 */
  cursor:pointer;
  background-color: #eee;
}

代码运行结果

在这里插入图片描述

龙眸

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
淘宝搜索案例

/获取用户输入的内容val()获取输入内容，trim()去除两端空格。//封装getSuggestlist函数，获取搜索建议列表。//指定请求的URL地址，其中q是用户输入的关键字。//如果关键词为空，则清空后隐藏搜索建议列表。//1.获取用户输入的内容，当做键k。//指定要发起的JSONP请求。//为输入框绑定keyup事件。//TODO获取搜索建议列表。//1.定义延时器的ID。//判断用户输入是否为空。//定义全局缓存对象。//定义防抖的函数。//成功的回调函数。...
复制链接

扫一扫