使用JQuery模仿實(shí)現(xiàn)淘寶搜索效果
最終實(shí)現(xiàn)效果如下
1、獲取用戶輸入的搜索關(guān)鍵詞
需要監(jiān)聽輸入框的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)行遍歷,一開始取得
是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)聽文本框的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是用戶輸入的搜索關(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() //獲取用戶輸入的數(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)求,通過一個(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)文章!
相關(guān)文章
JavaScript 學(xué)習(xí)筆記之一jQuery寫法圖片等比縮放以及預(yù)加載
以前對(duì)于JavaScript總是在用到的時(shí)候在頁(yè)面上寫幾個(gè)函數(shù),基本沒考慮到函數(shù)的封裝與重用,最近有個(gè)項(xiàng)目可能對(duì)于這方面要求有點(diǎn)高,所以就研究了下類似jQuery的封裝2012-06-06jQuery中$this和$(this)的區(qū)別介紹(一看就懂)
這篇文章主要介紹了jQuery中$this和$(this)的區(qū)別介紹(一看就懂),本文用簡(jiǎn)潔的語(yǔ)言講解了它們之間的區(qū)別,并給出了一個(gè)例子來(lái)說(shuō)明,需要的朋友可以參考下2015-07-07使用jquery實(shí)現(xiàn)簡(jiǎn)單的ajax
本篇文章是對(duì)用jquery實(shí)現(xiàn)簡(jiǎn)單的ajax的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-07-07jQuery實(shí)時(shí)顯示鼠標(biāo)指針位置和鍵盤ASCII碼
本文通過jquery技術(shù)實(shí)現(xiàn)鼠標(biāo)指針位置和鍵盤ASCII碼,非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-03-03jQuery插件Flexslider實(shí)現(xiàn)圖片輪播、圖文結(jié)合滑動(dòng)切換效果
這篇文章主要介紹了jQuery插件Flexslider實(shí)現(xiàn)圖片輪播、圖文結(jié)合滑動(dòng)切換效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07jQuery獲取cookie值及刪除cookie用法實(shí)例
這篇文章主要介紹了jQuery獲取cookie值及刪除cookie用法,實(shí)例分析了jQuery操作cookie時(shí)域和路徑的作用,以及針對(duì)cookie的讀取與刪除技巧,需要的朋友可以參考下2016-04-04