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

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

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

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

1、獲取用戶輸入的搜索關鍵詞

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

2、封裝getSuggestList函數(shù)

發(fā)JSONP請求，獲取內容

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

1、定義搜索建議列表

2、定義模板結構

服務器響應回來的數(shù)據(jù)（res）

把res直接給模板引擎

要對res里面的result進行遍歷，一開始取得

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

3、定義渲染模板結構的函數(shù)

4、搜索關鍵詞為空時隱藏搜索建議列表

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

實現(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>
    <!-- 導入頁面的基本樣式 -->
    <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>
            <!-- 搜索區(qū)域（搜索框和搜索按鈕） -->
            <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}}
        <!-- 循環(huán)服務器響應回來的數(shù)據(jù) -->
        <div class="suggest-item">{{$value[0]}}</div>
        <!-- 每循環(huán)一次，渲染一次搜索的建議項 -->
        {{/each}}
    </script>
 
</body>
 
</html>

$(function() {
    //監(jiān)聽文本框的keyup事件
    $('#ipt1').on('keyup', function() {
            //獲取文本框的輸入內容,.trim去掉空格內容
            var keywords = $(this).val().trim()
                //判斷輸入內容是否為空
            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事件時，立即清空timer
                debounceSearch(keywords) //防抖+請求+渲染
            }
 
        })
        //封裝函數(shù)
    function getSuggestList(kw) {
        //發(fā)起請求
        $.ajax({
            //指定請求的URL地址，q是用戶輸入的搜索關鍵詞
            url: 'https://suggest.taobao.com/sug?q=' + kw,
            dataType: 'JSONP',
            //指定回調函數(shù)，獲取建議列表的數(shù)據(jù)
            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() //獲取用戶輸入的數(shù)據(jù)，當作鍵
        cacheObj[k] = res //需要將數(shù)據(jù)作為值進行緩存
        console.log(cacheObj);
    }
    var timer = null //防抖動的timer
        //1、定義全局緩存對象
    var cacheObj = {}
 
    function debounceSearch(keywords) { //定義防抖的函數(shù)
        timer = setTimeout(function() {
            //發(fā)起JSONP請求，通過一個延遲器之后再發(fā)起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模仿實現(xiàn)淘寶搜索效果的詳細內容，更多關于JQuery淘寶搜索效果的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: