先放图
首先要引用的文件有：
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>
如对本文有疑问， 点击进行留言回复！！
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法（不用jQuery）
网友评论