使用JQuery模仿实现淘宝搜索效果

Olathe ·

更新时间:2024-09-21

· 1921 次阅读

最终实现效果如下

1、获取用户输入的搜索关键词

需要监听输入框的keyup事件

2、封装getSuggestList函数

发JSONP请求，获取内容

3、渲染建立列表的UI结构（模板引擎）

1、定义搜索建议列表

2、定义模板结构

服务器响应回来的数据（res）

把res直接给模板引擎

要对res里面的result进行遍历，一开始取得

是result里面索引号为0的数据

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

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

5、实现输入框的防抖

实现核心代码

<!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" rel="external nofollow"  />
    <!-- 导入 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='ipt1' class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">
            搜索
          </button>
            </div>
            <!-- 搜索建议列表 -->
            <div class="suggest-list"></div>
        </div>
    </div>
    <script src="10.js"></script>
    <!-- 模板结构 -->
    <script type="text/html" id="tpl">
        {{each result}}
        <!-- 循环服务器响应回来的数据 -->
        <div class="suggest-item">{{$value[0]}}</div>
        <!-- 每循环一次，渲染一次搜索的建议项 -->
        {{/each}}
    </script>
</body>
</html>

$(function() {
    //监听文本框的keyup事件
    $('#ipt1').on('keyup', function() {
            //获取文本框的输入内容,.trim去掉空格内容
            var keywords = $(this).val().trim()
                //判断输入内容是否为空
            if (keywords.length <= 0) {
                return $('.suggest-list').empty().hide()
            }
            //先判断缓存中是否有数据
            if (cacheObj[keywords]) {
                return renderSuggestList(cacheObj[keywords])
            }
            //或如搜索建议列表
            else {
                // getSuggestList(keywords)
                clearTimeout(timer) //再触发keyup事件时，立即清空timer
                debounceSearch(keywords) //防抖+请求+渲染
            }
        })
        //封装函数
    function getSuggestList(kw) {
        //发起请求
        $.ajax({
            //指定请求的URL地址，q是用户输入的搜索关键词
            url: 'https://suggest.taobao.com/sug?q=' + kw,
            dataType: 'JSONP',
            //指定回调函数，获取建议列表的数据
            success: function(res) {
                console.log(res);
                renderSuggestList(res)
            }
        })
    }
    // 定义渲染建议列表
    function renderSuggestList(res) {
        if (res.result.length <= 0) {
            return $('.suggest-list').empty().hide()
        }
        //渲染模板结构
        var htmstr = template('tpl', res)
        $('.suggest-list').html(htmstr).show()
            //将搜索的结果，添加到缓存对象中
        var k = $('#ipt1').val().trim() //获取用户输入的数据，当作键
        cacheObj[k] = res //需要将数据作为值进行缓存
        console.log(cacheObj);
    }
    var timer = null //防抖动的timer
        //1、定义全局缓存对象
    var cacheObj = {}
    function debounceSearch(keywords) { //定义防抖的函数
        timer = setTimeout(function() {
            //发起JSONP请求，通过一个延迟器之后再发起JSONP请求
            getSuggestList(keywords)
        }, 2000)
    }
})

.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 {
    display: none;
    border: 1px solid #ccc;
}
.suggest-item {
    height: 30px;
    padding-left: 5px;
    line-height: 30px;
}
.suggest-item:hover {
    cursor: pointer;
    background-color: #eee;
}

以上就是使用JQuery模仿实现淘宝搜索效果的详细内容，更多关于JQuery淘宝搜索效果的资料请关注软件开发网其它相关文章！

淘宝淘宝搜索 jQuery

1024 个赞