index.html 頭部區結構和樣式
效果圖
靜態樣式
index.html中的部分
<!-- 頭部 --> <div class="header"> <div class="container"> <!-- h1標簽是為了搜索引擎優化，表示重要 但是頁面內不要出現太多 --> <h1 class="fl"><a href="#" class="header-logo text-hidden">慕淘網</a></h1> <div class="search fl"> <!-- 由于沒有自己的搜索頁，演示時設定為提交到淘寶，參考淘寶設定 --> <form action="https://s.taobao.com/search"> <!-- 由于input是行內塊，相當于display:inline-block 如果換行寫，會造成空隙，空隙大小一般是默認字體的一半 可以不換行書寫，但是可讀性較差 都添加左浮動可以解決 --> <!-- 設定name才能提交 --> <input type="text" class="search-input fl" name="q" placeholder="靈魂美食一元搶" autocomplete="off"> <input type="submit" value="搜索" class="search-btn fl"> </form> <ul class="search-list"> <li class="search-item text-ellipsis" title="111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</li> <li class="search-item text-ellipsis" title="222">222</li> <li class="search-item text-ellipsis" title="333">333</li> </ul> </div> <div class="header-cart fr"></div> </div> </div>
common.css中新增搜索框組件公共樣式
/*搜索框組件 search*/ .search{ position: relative; width:679px; border:1px solid #cfd2d5; } .search-input{ width:586px; height:40px; line-height:40px; background-color:#fff; border:none; padding:0 10px; } .search-btn{ width:73px; height:40px; background-color:#07111b; color:#fff; line-height:40px; text-align: center; cursor:pointer; border:none; } .search-list{ display: none; background-color:#fff; position: absolute; width:586px; top:100%;/*父容器的高度*/ left:-1px; border:1px solid #cfd2d5; padding:0 10px; } .search-item{ height:24px; line-height:24px; }
index.css中新增header中獨有的樣式
/*header*/ .header{ height:124px; background-color: #f3f5f7; } .header-logo{ display: block; background:url(../img/header-logo.png) no-repeat; width:136px; height:48px; margin-top:36px; margin-left:15px; } .header .search{ margin-top:36px; margin-left:144px; }
引入search.js檔案
這里補充下幾個文本框事件的觸發條件的區別：
change 文本框內容改變 + blur
keypress 按鍵觸發，如果滑鼠不抬起連續按鍵，則連續觸發
keyup 按鍵釋放觸發，不管按什么鍵（包括上下箭頭等無文字意義符號），而且滑鼠粘貼過來的文本無法觸發
input 文本輸入，跟change的區別是不需要 blur 即可觸發；滑鼠粘貼也可觸發（兼容性不好：IE8以下不支持）
綜上所述，最理想的選擇是 input，但有時為了兼容性，只能選擇 keyup，并可以自己做一些約束改造
查看淘寶搜索的form表單提交action
//s.taobao.com/search
自己在表單使用時參考淘寶需要在前面加上https:協議
即：https://s.taobao.com/search
查看淘寶搜索輸入框的name屬性
name="q"
查看淘寶提交時ajax請求的url地址
1、打開網址，打開控制臺，找到network，點擊下面的JS
2、可以先用綠色框的那個按鈕將下面的內容清空一下，然后在輸入框中寫內容，下面Name的地方就會出來資訊
3、點擊任意一個進去，就會出現右側的Headers，里面的Request URL粘貼復制在瀏覽器地址欄中就可以看到了，
添加搜索驗證和獲取資料功能：
search.js
(function($){ "use strict"; //驗證 var search=$(".search"), searchInput=search.find(".search-input"), searchBtn=search.find(".search-btn"), searchList=search.find(".search-list"); searchBtn.on("click",function(){ //submit按鈕默認行為是提交表單，return false可以阻止默認行為 //$.trim() 去掉字串兩邊的空格，阻止無內容提交 if($.trim(searchInput.val())==="") return false; }); //自動完成 searchInput.on("input",function(){ var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=' + encodeURIComponent($.trim(searchInput.val())); $.ajax({ url:url, dataType:"jsonp",//jsonp用于跨域 success:function(data){ console.log(data); }, error:function(data){ console.log(error); } }); }); })(jQuery)
由于jQuery.ajax回傳的是jqXHR物件，它是瀏覽器原生XMLHttpRequest物件的一個超集，為了讓回呼函式名字統一，便于$.ajax中使用，jqXHR提供了.error()，.success()，.complete()
由于版本升級，才有了相應的.fail()，.done()，.always()三個方法
使用done(), fail(), always()是 為了避免代碼嵌套在ajax里面，方便閱讀
因此$.ajax寫法可以做如下修改，異步避免回呼：
// 異步避免回呼 $.ajax({ url:url, timeout:1,//失敗常見原因是超時，這里為了演示，將超時設定為1毫秒 dataType:"jsonp" }).done(function(data){//成功執行 console.log(data); }).fail(function(){//失敗執行 console.log("fail"); }).always(function(){//總是執行 console.log("always"); });
失敗有很多種原因，其中超時是一個很常見的原因
為了演示超時，設定timeout:1 （1毫秒）
$.trim(searchInput.val()) 這邊默認是使用的utf-8編碼
如果在頁面為其他編碼格式，如：gbk 時，可能會因為編碼問題造成讀取資料失敗
因此使用 encodeURIComponent( ) 來解決編碼問題
1、encodeURIComponent(URIstring ) 函式可把字串作為 URI 組件進行編碼，回傳值是URIstring 的副本，其中的某些字符將被十六進制的轉義序列進行替換，簡單來說作用就是進行編碼，能夠被后臺識別，后臺開發語言都有相應的解碼 api，這樣就可以成功的回傳資料，
2、網頁的編碼會影響到發送請求時資料的編碼，所以不一致時需要編碼，
var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q='
+ encodeURIComponent($.trim(searchInput.val()));
生成下拉層資料結構
(function($){ "use strict"; //驗證 var search=$(".search"), searchInput=search.find(".search-input"), searchBtn=search.find(".search-btn"), searchList=search.find(".search-list"); searchBtn.on("click",function(){ //submit按鈕默認行為是提交表單，return false可以阻止默認行為 //$.trim() 去掉字串兩邊的空格，阻止無內容提交 if($.trim(searchInput.val())==="") return false; }); //自動完成 searchInput.on("input",function(){ var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=' + encodeURIComponent($.trim(searchInput.val())); // 異步避免回呼 $.ajax({ url:url, dataType:"jsonp" }).done(function(data){//成功執行 //console.log(data["result"]); var html=""; var dataNum=data["result"].length;//實際資料量 var maxNum=10;//最大顯示資料量 if(dataNum===0) searchList.hide().html(""); for(var i=0;i<dataNum;i++){ if(i>=maxNum) break; //console.log(data["result"][i][0]); html+='<li title="'+data["result"][i][0]+'">'+data["result"][i][0]+'</li>'; } searchList.html(html).show(); }).fail(function(){//失敗執行 searchList.hide().html(""); }).always(function(){//總是執行 console.log("always"); }); }); })(jQuery)
順便將之前index.html中這部分注釋掉
<ul class="search-list"> <!-- <li title="111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</li> <li title="222">222</li> <li title="333">333</li> --> </ul>
效果
事件代理和顯示隱藏下拉層
(function($){ "use strict"; //驗證 var search=$(".search"), searchForm=search.find(".search-form"), searchInput=search.find(".search-input"), searchBtn=search.find(".search-btn"), searchList=search.find(".search-list"); searchForm.on("submit",function(){ //return false可以阻止默認行為，即阻止表單提交 //$.trim() 去掉字串兩邊的空格，阻止無內容提交 if($.trim(searchInput.val())==="") return false; }); //自動完成 searchInput.on("input",function(){ var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=' + encodeURIComponent($.trim(searchInput.val())); // 異步避免回呼 $.ajax({ url:url, dataType:"jsonp" }).done(function(data){//成功執行 //console.log(data["result"]); var html=""; var dataNum=data["result"].length;//實際資料量 var maxNum=10;//最大顯示資料量 if(dataNum===0) searchList.hide().html(""); for(var i=0;i<dataNum;i++){ if(i>=maxNum) break; //console.log(data["result"][i][0]); html+='<li title="'+data["result"][i][0]+'">'+data["result"][i][0]+'</li>'; } searchList.html(html).show(); }).fail(function(){//失敗執行 searchList.hide().html(""); }).always(function(){//總是執行 console.log("always"); }); }); //jquery的事件代理 //事件系結在父元素上，第一個引數是事件，第二個引數是被代理的子元素們，第三個引數是函式 //函式里的$(this)指向的是被代理的子元素 searchList.on("click",".search-item",function(){ searchInput.val(removeHTML($(this).html())); searchForm.submit(); }); //顯示隱藏下拉層 // searchInput.on("focus",function(){ // searchList.show(); // }).on("blur",function(){ // searchList.hide(); // }); //以上這種方法不可行，會導致點擊串列項失效 //因為blur事件與click事件沖突 //因為在選項上按下滑鼠時，已經觸發了input的blur事件，導致串列隱藏；再出發串列項的點擊時，串列已經被隱藏 searchInput.on("focus",function(){ searchList.show(); }).on("click",function(){ return false;//阻止點擊時冒泡到document }); $(document).on("click",function(){ searchList.hide(); }); //去掉下拉串列專案的html標簽，不然點擊后會顯示在搜索框中 function removeHTML(str){ // 示例：<input type="text" value="https://www.cnblogs.com/chenyingying0/p/>" name='username' /> // 1、標簽中的屬性使用的引號 可能是雙引號，也可能是單引號，所以匹配引號外面的內容使用^取反，雙引號，單引號和>不能獲取，其他都是可以獲取的， // 2、匹配引號里面的內容，不能匹配到引號，其他都是可以的，數量上可以為0，也就是引號中間沒有內容，單引號和雙引號都有可能，所以寫了兩次， // 3、然后把這匹配的三個作為一組，需要全部都進行匹配，數量上可以為0，不需要捕獲分組的內容，所以使用了?: // 4、最外層是<> return str.replace(/<(?:[^'">]|"[^"]*"|'[^']*')*>/g,""); } })(jQuery)
知識點：
點擊 input 顯示下拉層，點擊其他地方隱藏下拉層
這個功能，不能用下面這段代碼
searchInput.on("focus",function(){
searchList.show();
}).on("blur",function(){
searchList.hide();
});
因為這里的blur事件與click事件存在沖突
在選項上按下滑鼠時，已經觸發了input的blur事件，導致串列隱藏；再出發串列項的點擊時，串列已經被隱藏
需要使用下面這段代碼：（注意要阻止冒泡）
//顯示隱藏下拉層 searchInput.on("focus",function(){ searchList.show(); }).on("click",function(){ return false;//阻止點擊時冒泡到document }); $(document).on("click",function(){ searchList.hide(); });
去掉字串中 html 標簽的正則：
//去掉下拉串列專案的html標簽，不然點擊后會顯示在搜索框中 function removeHTML(str){ return str.replace(/<(?:[^'">]|"[^"]*"|'[^']*')*>/g,""); }
示例：<input type="text" value="https://www.cnblogs.com/chenyingying0/p/>" name='username' />
1、標簽中的屬性使用的引號 可能是雙引號，也可能是單引號，所以匹配引號外面的內容使用^取反，雙引號，單引號和>不能獲取，其他都是可以獲取的，
2、匹配引號里面的內容，不能匹配到引號，其他都是可以的，數量上可以為0，也就是引號中間沒有內容，單引號和雙引號都有可能，所以寫了兩次，
3、然后把這匹配的三個作為一組，需要全部都進行匹配，數量上可以為0，不需要捕獲分組的內容，所以使用了?:
4、最外層是<>
面向物件方式封裝搜索框功能
search.js
(function($){ "use strict"; function Search(elem,options){ this.elem=elem;//已經是傳入的jquery物件 this.options=options; this.form=this.elem.find(".search-form"); this.input=this.elem.find(".search-input"); this.list=this.elem.find(".search-list"); //系結提交事件，事件代理 this.elem.on("click",".search-btn",$.proxy(this.submit,this)); //如果設定了自動完成 if(this.options.autocomplete) this.autocomplete(); } //默認引數 Search.defaults={ autocomplete:false, url:"https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=", css3:false, js:false, animation:"fade" } Search.prototype.submit=function(){ if($.trim(this.input.val())==="") return false; this.form.submit(); } Search.prototype.autocomplete=function(){ this.input.on("input",$.proxy(this.getData,this)); this.list.showHide(this.options);//向showhide組件傳參，初始化 //顯示隱藏下拉層 this.input.on("focus",$.proxy(this.showList,this)) .on("click",function(){ return false;//阻止點擊時冒泡到document }); $(document).on("click",$.proxy(this.hideList,this)); } Search.prototype.getData=function(){ var self=this; $.ajax({ url:this.options.url+encodeURIComponent($.trim(this.input.val())), dataType:"jsonp" }).done(function(data){ //發送data資料，觸發事件 self.elem.trigger("search-getData",[data,self.list]);//資料需要用陣列形式 }).fail(function(){ //發送失敗資料，觸發事件 self.elem.trigger("search-noData",[self.list]); }); } Search.prototype.showList=function(){ //list里有內容才顯示 if(this.list.children().length===0) return; this.list.showHide("show");//使用showhide組件的show方法 } Search.prototype.hideList=function(){ this.list.showHide("hide");//使用showhide組件的hide方法 } Search.prototype.setInput=function(val){ this.input.val(val); } //插件形式 $.fn.extend({ search:function(opt,value){ return this.each(function(){ var ui=$(this); var search=ui.data("search"); //opt是引數物件 var options=$.extend({},Search.defaults,ui.data(),typeof opt==="object"&&opt); //單例：一個DOM元素對應一個實體，如果已經存在則不需要反復實體化 if(!search){ search=new Search(ui,options); ui.data("search",search); } //暴露出一些方法供外部呼叫 if(typeof search[opt]==="function"){ search[opt](value); } }); } }); })(jQuery)
index.js
// 不要暴露在全域，使用匿名函式自執行 (function($){ "use strict"; //menu //系結事件 顯示之前加載資料 $(".dropdown").on("dropdown-show",function(e){ var ui=$(this); var dataLoad=ui.data("load"); if(!dataLoad) return; if(!ui.data("loaded")){ var list=ui.find(".dropdown-list"); var html=""; setTimeout(function(){ $.getJSON(dataLoad,function(data){ for(var i=0;i<data.length;i++){ console.log(data[i]); html+='<li ><a href="'+data[i]["url"]+'">'+data[i]["name"]+'</a></li>'; } list.html(html); ui.data("loaded",true); }); },500); } }); //插件形式呼叫 $(".dropdown").dropdown({ css3:true, js:true }); //search var headerSearch=$("#header-search"); var html=""; var maxNum=10;//最大顯示資料量 headerSearch.search({ autocomplete:true, css3:false, js:false, animation:"fade" }); //接收事件 headerSearch.on("search-getData",function(e,data,list){ //console.log(e.type); //console.log(data); var ui=$(this); //獲取資料之后的處理 html=createHeaderList(data,maxNum); list.html(html); if(html){ ui.search("showList"); }else{ ui.search("hideList"); } }); headerSearch.on("search-noData",function(e,list){ ui.search("hideList");//隱藏下拉串列 list.html("");//清空內容 }); headerSearch.on("click",".search-item",function(){ headerSearch.search("setInput",$(this).text()); headerSearch.search("submit"); }); //創建header中搜索框的下拉串列結構 function createHeaderList(data,maxNum){ var html=""; var dataNum=data["result"].length;//實際資料量 if(dataNum===0) return ""; for(var i=0;i<dataNum;i++){ if(i>=maxNum) break; html+='<li title="'+data["result"][i][0]+'">'+data["result"][i][0]+'</li>'; } return html; } })(jQuery);
接下來進行代碼的優化：
1、上面這句代碼是對DOM的操作，比較耗費性能，優化：引入loaded變數來判斷
2、發送ajax請求時，需要新增判斷資料為空的情況
3、如果一次ajax請求還沒完成，就發送了下一次ajax請求，那么會導致回傳的資料無法判斷是哪一次的，優化：進行下一次請求時先終止之前的請求
4、搜索框每輸入一個字符，就會發送一次ajax請求，即使兩次間隔很短；建議：根據用戶需求，判斷是否需要加入延遲
優化后的search.js
(function($){ "use strict"; function Search(elem,options){ this.elem=elem;//已經是傳入的jquery物件 this.options=options; this.form=this.elem.find(".search-form"); this.input=this.elem.find(".search-input"); this.list=this.elem.find(".search-list"); this.loaded=false;//是否裝載html //系結提交事件，事件代理 this.elem.on("click",".search-btn",$.proxy(this.submit,this)); //如果設定了自動完成 if(this.options.autocomplete) this.autocomplete(); } //默認引數 Search.defaults={ autocomplete:false, url:"https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=", css3:false, js:false, animation:"fade", delay:200//默認200毫秒延遲 } Search.prototype.submit=function(){ if($.trim(this.input.val())==="") return false; this.form.submit(); } Search.prototype.autocomplete=function(){ var self=this; var timer=null; this.input.on("input",function(){ if(self.options.delay){ clearTimeout(timer); timer=setTimeout(function(){ self.getData(); },self.options.delay); }else{ self.getData(); //delay為0時，不需要開定時器 //因為定時器屬于異步，即使延遲為0，也會進入排隊狀態，無法立刻執行 } }); this.list.showHide(this.options);//向showhide組件傳參，初始化 //顯示隱藏下拉層 this.input.on("focus",$.proxy(this.showList,this)) .on("click",function(){ return false;//阻止點擊時冒泡到document }); $(document).on("click",$.proxy(this.hideList,this)); } Search.prototype.getData=function(){ var self=this; var inputVal=this.input.val(); if(!inputVal) return self.elem.trigger("search-noData"); if(this.jqXHR) this.jqXHR.abort();//進行ajax請求時，先終止之前的請求 this.jqXHR=$.ajax({ url:this.options.url+encodeURIComponent($.trim(inputVal)), dataType:"jsonp" }).done(function(data){ //發送data資料，觸發事件 self.elem.trigger("search-getData",[data]);//資料需要用陣列形式 }).fail(function(){ //發送失敗資料，觸發事件 self.elem.trigger("search-noData"); }).always(function(){ //執行完畢后 self.jqXHR=null; }); } Search.prototype.showList=function(){ //list里有內容才顯示 if(!this.loaded) return; this.list.showHide("show");//使用showhide組件的show方法 } Search.prototype.hideList=function(){ this.list.showHide("hide");//使用showhide組件的hide方法 } Search.prototype.setInput=function(val){ this.input.val(val); } Search.prototype.appendHTML=function(html){ this.list.html(html); this.loaded=!!html;//!!轉布林值，如果html有內容，轉為真；否則為假 } //插件形式 $.fn.extend({ search:function(opt,value){ return this.each(function(){ var ui=$(this); var search=ui.data("search"); //opt是引數物件 var options=$.extend({},Search.defaults,ui.data(),typeof opt==="object"&&opt); //單例：一個DOM元素對應一個實體，如果已經存在則不需要反復實體化 if(!search){ search=new Search(ui,options); ui.data("search",search); } //暴露出一些方法供外部呼叫 if(typeof search[opt]==="function"){ search[opt](value); } }); } }); })(jQuery)
index.js
// 不要暴露在全域，使用匿名函式自執行 (function($){ "use strict"; //menu //系結事件 顯示之前加載資料 $(".dropdown").on("dropdown-show",function(e){ var ui=$(this); var dataLoad=ui.data("load"); if(!dataLoad) return; if(!ui.data("loaded")){ var list=ui.find(".dropdown-list"); var html=""; setTimeout(function(){ $.getJSON(dataLoad,function(data){ for(var i=0;i<data.length;i++){ console.log(data[i]); html+='<li ><a href="'+data[i]["url"]+'">'+data[i]["name"]+'</a></li>'; } list.html(html); ui.data("loaded",true); }); },500); } }); //插件形式呼叫 $(".dropdown").dropdown({ css3:true, js:true }); //search var headerSearch=$("#header-search"); var html=""; var maxNum=10;//最大顯示資料量 headerSearch.search({ autocomplete:true, css3:false, js:false, animation:"fade", delay:0 }); //接收事件 headerSearch.on("search-getData",function(e,data){ //console.log(e.type); console.log(data); var ui=$(this); //獲取資料之后的處理 html=createHeaderList(data,maxNum); ui.search("appendHTML",html); if(html){ ui.search("showList"); }else{ ui.search("hideList"); } }).on("search-noData",function(e){ $(this).search("hideList");//隱藏下拉串列 $(this).search("appendHTML","");//清空內容 }).on("click",".search-item",function(){ $(this).search("setInput",$(this).text()); $(this).search("submit"); }); //創建header中搜索框的下拉串列結構 function createHeaderList(data,maxNum){ var html=""; var dataNum=data["result"].length;//實際資料量 if(dataNum===0) return ""; for(var i=0;i<dataNum;i++){ if(i>=maxNum) break; html+='<li title="'+data["result"][i][0]+'">'+data["result"][i][0]+'</li>'; } return html; } })(jQuery);
index.html
<!DOCTYPE html> <html lang="zh-CN"><!-- 設定簡體中文 --> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/common.css"> <!-- css一般放在DOM加載前，防止DOM裸奔 --> </head> <body> <!-- 導航 --> <div class="nav-site"> <div class="container"> <ul class="fl"> <li class="fl"><a href="javascript:;" class="nav-site-login">親，請登錄</a></li> <li class="fl"><a href="javascript:;" class="nav-site-reg link">免費注冊</a></li> <li class="fl"><a href="#" class="nav-site-shop link">手機逛慕淘</a></li> </ul> <ul class="fr"> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow iconfont transition"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </li> <li class="fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link transition">收藏夾<i class="dropdown-arrow iconfont transition"></i></a> <ul class="dropdown-list dropdown-left"> <li class="menu-item"><a href="#">收藏的寶貝</a></li> <li class="menu-item"><a href="#">收藏的店鋪</a></li> </ul> </li> <li class="fl dropdown"> <a href="javascript:;" class="nav-site-cat link">商品分類</i></a> </li> <li class="fl dropdown menu" data-active="menu" data-load="js/dropdown-seller.json"> <a href="javascript:;" class="dropdown-toggle link transition">賣家中心<i class="dropdown-arrow iconfont transition"></i></a> <ul class="dropdown-list dropdown-left"> <li class="dropdown-loading"></li> <!-- <li ><a href="https://www.cnblogs.com/chenyingying0/p/#">免費開店</a></li> <li ><a href="https://www.cnblogs.com/chenyingying0/p/#">已賣出的寶貝</a></li> <li ><a href="https://www.cnblogs.com/chenyingying0/p/#">出售中的寶貝</a></li> <li ><a href="https://www.cnblogs.com/chenyingying0/p/#">賣家服務市場</a></li> <li ><a href="https://www.cnblogs.com/chenyingying0/p/#">賣家培訓中心</a></li> <li ><a href="https://www.cnblogs.com/chenyingying0/p/#">體驗中心</a></li> --> </ul> </li> <li class="nav-site-service fl dropdown menu" data-active="menu"> <a href="javascript:;" class="dropdown-toggle link transition">聯系客服<i class="dropdown-arrow iconfont transition"></i></a> <ul class="dropdown-list dropdown-right"> <li class="menu-item"><a href="#">已買到的寶貝</a></li> <li class="menu-item"><a href="#">我的足跡</a></li> </ul> </li> </ul> </div> </div> <!-- 頭部 --> <div class="header"> <div class="container"> <!-- h1標簽是為了搜索引擎優化，表示重要 但是頁面內不要出現太多 --> <h1 class="fl"><a href="#" class="header-logo text-hidden">慕淘網</a></h1> <div id="header-search" class="search fl"> <!-- 由于沒有自己的搜索頁，演示時設定為提交到淘寶，參考淘寶設定 --> <form action="https://s.taobao.com/search" class="search-form"> <!-- 由于input是行內塊，相當于display:inline-block 如果換行寫，會造成空隙，空隙大小一般是默認字體的一半 可以不換行書寫，但是可讀性較差 都添加左浮動可以解決 --> <!-- 設定name才能提交 --> <input type="text" class="search-input fl" name="q" placeholder="靈魂美食一元搶" autocomplete="off"> <input type="submit" value="搜索" class="search-btn fl"> </form> <ul class="search-list"> <!-- <li title="111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</li> <li title="222">222</li> <li title="333">333</li> --> </ul> </div> <div class="header-cart fr"></div> </div> </div> <!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> //短路操作，如果cdn的jquery沒有參考成功，則會執行后面一句，引入本地jquery //括號中的<\/script>標簽會被當做當前標簽的結束標簽，因此需要轉義 window.jQuery || document.write('<script src="https://www.cnblogs.com/chenyingying0/p/js/jquery.js"><\/script>'); </script> --> <script src="js/jquery.js"></script> <script src="js/transition.js"></script> <script src="js/showhide.js"></script> <script src="js/dropdown.js"></script> <script src="js/search.js"></script> <script src="js/index.js"></script> </body> </html>
最后，優化之資料快取
思路：獲取到的資料存入變數、cookie、或是本地存盤：session storage / local storage (HTML5) 或是本地資料庫
search.js
(function($){ "use strict"; var cache={ data:{}, count:0,//資料條數 addData:function(data,key){ if(!this.data[key]){ this.data[key]=data; this.count++; } }, readData:function(key){ return this.data[key]; }, deleteDataByKey:function(key){ delete this.data[key]; this.count--; }, deleteDataByNum:function(num){ var count=0; //物件沒有length屬性，只能通過for in來遍歷 for(var p in this.data){ if(count>=num) break; this.deleteDataByKey(p); this.count++; } } }; function Search(elem,options){ this.elem=elem;//已經是傳入的jquery物件 this.options=options; this.form=this.elem.find(".search-form"); this.input=this.elem.find(".search-input"); this.list=this.elem.find(".search-list"); this.loaded=false;//是否裝載html //系結提交事件，事件代理 this.elem.on("click",".search-btn",$.proxy(this.submit,this)); //如果設定了自動完成 if(this.options.autocomplete) this.autocomplete(); } //默認引數 Search.defaults={ autocomplete:false, url:"https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=", css3:false, js:false, animation:"fade", delay:200//默認200毫秒延遲 } Search.prototype.submit=function(){ if($.trim(this.input.val())==="") return false; this.form.submit(); } Search.prototype.autocomplete=function(){ var self=this; var timer=null; this.input.on("input",function(){ if(self.options.delay){ clearTimeout(timer); timer=setTimeout(function(){ self.getData(); },self.options.delay); }else{ self.getData(); //delay為0時，不需要開定時器 //因為定時器屬于異步，即使延遲為0，也會進入排隊狀態，無法立刻執行 } }); this.list.showHide(this.options);//向showhide組件傳參，初始化 //顯示隱藏下拉層 this.input.on("focus",$.proxy(this.showList,this)) .on("click",function(){ return false;//阻止點擊時冒泡到document }); $(document).on("click",$.proxy(this.hideList,this)); } Search.prototype.getData=function(){ var self=this; var inputVal=this.input.val(); if(!inputVal) return self.elem.trigger("search-noData"); //判斷是否已有快取 if(cache.readData(inputVal)) return self.elem.trigger("search-getData",[cache.readData(inputVal)]); if(this.jqXHR) this.jqXHR.abort();//進行ajax請求時，先終止之前的請求 this.jqXHR=$.ajax({ url:this.options.url+encodeURIComponent($.trim(inputVal)), dataType:"jsonp" }).done(function(data){ //發送data資料，觸發事件 cache.addData(data,inputVal);//添加快取 console.log(cache.data); console.log(cache.count); self.elem.trigger("search-getData",[data]);//資料需要用陣列形式 }).fail(function(){ //發送失敗資料，觸發事件 self.elem.trigger("search-noData"); }).always(function(){ //執行完畢后 self.jqXHR=null; }); } Search.prototype.showList=function(){ //list里有內容才顯示 if(!this.loaded) return; this.list.showHide("show");//使用showhide組件的show方法 } Search.prototype.hideList=function(){ this.list.showHide("hide");//使用showhide組件的hide方法 } Search.prototype.setInput=function(val){ this.input.val(val); } Search.prototype.appendHTML=function(html){ this.list.html(html); this.loaded=!!html;//!!轉布林值，如果html有內容，轉為真；否則為假 } //插件形式 $.fn.extend({ search:function(opt,value){ return this.each(function(){ var ui=$(this); var search=ui.data("search"); //opt是引數物件 var options=$.extend({},Search.defaults,ui.data(),typeof opt==="object"&&opt); //單例：一個DOM元素對應一個實體，如果已經存在則不需要反復實體化 if(!search){ search=new Search(ui,options); ui.data("search",search); } //暴露出一些方法供外部呼叫 if(typeof search[opt]==="function"){ search[opt](value); } }); } }); })(jQuery)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7152.html
標籤：jQuery