使用JQuery模仿實(shí)現(xiàn)淘寶搜索效果

更新時(shí)間：2022年04月12日 08:13:30 作者：一夕ξ

這篇文章主要介紹了如何利用JQuery模仿實(shí)現(xiàn)淘寶中的搜索效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手嘗試一下

最終實(shí)現(xiàn)效果如下

1、獲取用戶(hù)輸入的搜索關(guān)鍵詞

需要監(jiān)聽(tīng)輸入框的keyup事件

2、封裝getSuggestList函數(shù)

發(fā)JSONP請(qǐng)求，獲取內(nèi)容

3、渲染建立列表的UI結(jié)構(gòu)（模板引擎）

1、定義搜索建議列表

2、定義模板結(jié)構(gòu)

服務(wù)器響應(yīng)回來(lái)的數(shù)據(jù)（res）

把res直接給模板引擎

要對(duì)res里面的result進(jìn)行遍歷，一開(kāi)始取得

是result里面索引號(hào)為0的數(shù)據(jù)

3、定義渲染模板結(jié)構(gòu)的函數(shù)

4、搜索關(guān)鍵詞為空時(shí)隱藏搜索建議列表

5、實(shí)現(xiàn)輸入框的防抖

實(shí)現(xiàn)核心代碼

<!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>
    <!-- 導(dǎo)入頁(yè)面的基本樣式 -->
    <link rel="stylesheet" href="./css/search.css" rel="external nofollow"  />
    <!-- 導(dǎo)入 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>
            <!-- 搜索區(qū)域（搜索框和搜索按鈕） -->
            <div class="search-box">
                <input type="text" id='ipt1' class="ipt" placeholder="請(qǐng)輸入要搜索的內(nèi)容" /><button class="btnSearch">
            搜索
          </button>
 
            </div>
            <!-- 搜索建議列表 -->
            <div class="suggest-list"></div>
        </div>
 
    </div>
    <script src="10.js"></script>
    <!-- 模板結(jié)構(gòu) -->
    <script type="text/html" id="tpl">
        {{each result}}
        <!-- 循環(huán)服務(wù)器響應(yīng)回來(lái)的數(shù)據(jù) -->
        <div class="suggest-item">{{$value[0]}}</div>
        <!-- 每循環(huán)一次，渲染一次搜索的建議項(xiàng) -->
        {{/each}}
    </script>
 
</body>
 
</html>

$(function() {
    //監(jiān)聽(tīng)文本框的keyup事件
    $('#ipt1').on('keyup', function() {
            //獲取文本框的輸入內(nèi)容,.trim去掉空格內(nèi)容
            var keywords = $(this).val().trim()
                //判斷輸入內(nèi)容是否為空
            if (keywords.length <= 0) {
                return $('.suggest-list').empty().hide()
            }
            //先判斷緩存中是否有數(shù)據(jù)
            if (cacheObj[keywords]) {
 
                return renderSuggestList(cacheObj[keywords])
            }
            //或如搜索建議列表
            else {
                // getSuggestList(keywords)
                clearTimeout(timer) //再觸發(fā)keyup事件時(shí)，立即清空timer
                debounceSearch(keywords) //防抖+請(qǐng)求+渲染
            }
 
        })
        //封裝函數(shù)
    function getSuggestList(kw) {
        //發(fā)起請(qǐng)求
        $.ajax({
            //指定請(qǐng)求的URL地址，q是用戶(hù)輸入的搜索關(guān)鍵詞
            url: 'https://suggest.taobao.com/sug?q=' + kw,
            dataType: 'JSONP',
            //指定回調(diào)函數(shù)，獲取建議列表的數(shù)據(jù)
            success: function(res) {
                console.log(res);
                renderSuggestList(res)
            }
        })
 
    }
    // 定義渲染建議列表
    function renderSuggestList(res) {
        if (res.result.length <= 0) {
            return $('.suggest-list').empty().hide()
        }
        //渲染模板結(jié)構(gòu)
        var htmstr = template('tpl', res)
        $('.suggest-list').html(htmstr).show()
            //將搜索的結(jié)果，添加到緩存對(duì)象中
        var k = $('#ipt1').val().trim() //獲取用戶(hù)輸入的數(shù)據(jù)，當(dāng)作鍵
        cacheObj[k] = res //需要將數(shù)據(jù)作為值進(jìn)行緩存
        console.log(cacheObj);
    }
    var timer = null //防抖動(dòng)的timer
        //1、定義全局緩存對(duì)象
    var cacheObj = {}
 
    function debounceSearch(keywords) { //定義防抖的函數(shù)
        timer = setTimeout(function() {
            //發(fā)起JSONP請(qǐng)求，通過(guò)一個(gè)延遲器之后再發(fā)起JSONP請(qǐng)求
            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模仿實(shí)現(xiàn)淘寶搜索效果的詳細(xì)內(nèi)容，更多關(guān)于JQuery淘寶搜索效果的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: