带输入提示的搜索框ajax请求
程序员文章站
2022-08-09 17:11:33
先放图 首先要引用的文件有: base.css https://www.cnblogs.com/chenyingying0/p/12363689.html jquery.js transition.js https://www.cnblogs.com/chenyingying0/p/12363649 ......
先放图
首先要引用的文件有:
base.css
jquery.js
transition.js
showhide.js
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)
接下来是html代码
<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 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>
加上点样式
.fl{ float:left; } .search{ margin-top:36px; margin-left:144px; 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:606px; top:100%;/*父容器的高度*/ left:-1px; border:1px solid #cfd2d5; } .search-item{ height:24px; line-height:24px; padding:0 10px; } .search-item:hover{ background-color:#f3f5f7; cursor: pointer; }
调用搜索功能的js
<script> //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 class="search-item text-ellipsis" title="'+data["result"][i][0]+'">'+data["result"][i][0]+'</li>'; } return html; } </script>
完成
放出完整的页面代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>search</title> <link rel="stylesheet" href="../css/base.css"> <link rel="stylesheet" href="../css/search.css"> </head> <body> <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 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> <script src="../js/jquery.js"></script> <script src="../js/transition.js"></script> <script src="../js/showhide.js"></script> <script src="../js/search.js"></script> <script> //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 class="search-item text-ellipsis" title="'+data["result"][i][0]+'">'+data["result"][i][0]+'</li>'; } return html; } </script> </body> </html>