淘宝搜索案例

最新推荐文章于 2024-09-02 20:34:02 发布

再学习一点

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量217

点赞数

分类专栏：学习案例文章标签： css html css3

本文链接：https://blog.csdn.net/a_xia_o/article/details/130306551

版权

学习案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.想要制作的效果

2.获取用户输入的搜索关键词

为了获取用户每次按下键盘输入的内容，需要监听输入框的keyup事件，示例代码如下：

3.3封装getSuggestList函数

将获取搜索建议列表的代码，封装到getSuggestList函数中，示例代码如下：

3.4渲染建议列表的UI结构

1.定义搜索建议列表

2.定义模板结构

3.定义渲染模板结构的函数

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

//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
<!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() {
            //为输入框绑定keyup事件
            $('#ipt').on('keyup', function() {
                var keywords = $(this).val().trim()
                if (keywords.length <= 0) {
                    return $('#suggest-list').empty().hide()
                }
                //TODO:获取搜素建议列表
                // console.log(keywords)
                getSuggestList(keywords)
            })

            function getSuggestList(kw) {
                $.ajax({
                    url: 'https://suggest.taobao.com/sug?q=' + kw,
                    dataType: 'jsonp',
                    success: function(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()
            }
        })
    </script>
</body>

</html>