js时时搜索框

最新推荐文章于 2022-06-14 13:51:46 发布

晨晨快跑

最新推荐文章于 2022-06-14 13:51:46 发布

阅读量344

点赞数

分类专栏：技术文章标签： jquery js 时时搜索框

本文链接：https://blog.csdn.net/baidu_38027860/article/details/79930966

版权

技术专栏收录该内容

118 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style>

body,html{
width: 100%;
height: 80%;
font-size: 62.5%;
background: rgb(245,245,245);
}

*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}

.sousuo{
width: 100%;
height: 2rem;
margin-top: 5rem;
margin-left: 35rem;
position: relative;
}
.xianshi{
position: absolute;
left: 0;
top: 2rem;
/*height: 20rem;*/
width: 14rem;
border: 1px solid #DDDDDD;
background: #FFFFFF;
display: none;
/*overflow: hidden;*/
}
.xianshi>ul{
width: 100%;
}
.xianshi>ul>li{
width: 100%;
height: 2rem;
text-align: center;
line-height: 2rem;
font-size: 1.6rem;
}
.xianshi>ul>li:hover{
background: #666666;
cursor:pointer
}
.xianshi>ul>li:active{
background: #333;
}
#zhezhao{
position: fixed;
width: 100%;
height: 100%;
background: #FFFFFF;
opacity: 0;
display: none;
}

</style>
</head>
<body>


<div id="zhezhao">
</div>


<div class="sousuo">
<input type="text" name="" id="sousuo" value="" placeholder="搜索"/>
<div class="xianshi">
<ul>
</ul>
</div>
</div>

<script type="text/javascript">

var data = {"data":[{"id":"01ace2e19b724a20a50d1da6ce6f44cf","name":"哈哈哈","phoneNumber":"13888888888","password":"21218cca77804d2ba1922c33e0151105","birthday":1494950400000,"address":"","vipCard":"000007","customerType":"普通用户","point":"黄寺3号院","createTime":1496196772000,"balance":0.0,"externalVipCard":"000007"},{"id":"0aaed4ff50e34e609d9611b012a257c2","name":"老奶奶","phoneNumber":"14555555555","password":"5b1b68a9abf4d2cd155c81a9225fd158","birthday":1494345600000,"address":"","vipCard":"000012","customerType":"普通用户","point":"黄寺3号院","createTime":1496196974000,"balance":0.0,"externalVipCard":"000012"},{"id":"0e9e5cdd9ffe41a6aa5df007418c9b04","name":"啦啦啦","phoneNumber":"14333333333","password":"1a100d2c0dab19c4430e7d73762b3423","birthday":1496160000000,"address":"","vipCard":"000008","customerType":"普通用户","point":"黄寺3号院","createTime":1496196910000,"balance":0.0,"externalVipCard":"000008"},{"id":"119ecde04dd64b8f993f18b0d62866ee","name":"嗷嗷嗷","phoneNumber":"13111111111","password":"96e79218965eb72c92a549dd5a330112","birthday":null,"address":"","vipCard":"000002","customerType":"普通用户","point":"爱心家园","createTime":1496196110000,"balance":0.0,"externalVipCard":"000002"},{"id":"18a92276b8fa46d9a5823ed1f25993c1","name":"对对对","phoneNumber":"13444444444","password":"73882ab1fa529d7273da0db6b49cc4f3","birthday":1496160000000,"address":"","vipCard":"000005","customerType":"普通用户","point":"黄寺3号院","createTime":1496196653000,"balance":0.0,"externalVipCard":"000005"},{"id":"44e99965818747faaa49b24091029789","name":"嘎嘎嘎","phoneNumber":"13777777777","password":"f63f4fbc9f8c85d409f2f59f2b9e12d5","birthday":1494432000000,"address":"","vipCard":"000015","customerType":"普通用户","point":"黄寺3号院","createTime":1496196748000,"balance":0.0,"externalVipCard":"000015"},{"id":"536907ec22a549b7bd1d0732aed41b1b","name":"狙击镜","phoneNumber":"14111111111","password":"96e79218965eb72c92a549dd5a330112","birthday":1494259200000,"address":"","vipCard":"000009","customerType":"普通用户","point":"爱心家园","createTime":1496196858000,"balance":0.0,"externalVipCard":"000009"},{"id":"7f16064924304ac4b176b1b9c667b841","name":"不不不","phoneNumber":"13222222222","password":"e3ceb5881a0a1fdaad01296d7554868d","birthday":1496160000000,"address":"","vipCard":"000011","customerType":"普通用户","point":"京客隆","createTime":1496196598000,"balance":1.0,"externalVipCard":"000011"},{"id":"82eb020b0e7f48d09fe1f9b75471a35e","name":"快快快","phoneNumber":"14222222222","password":"e3ceb5881a0a1fdaad01296d7554868d","birthday":1494259200000,"address":"","vipCard":"000003","customerType":"普通用户","point":"爱心家园","createTime":1496196880000,"balance":0.0,"externalVipCard":"000003"},{"id":"8455dad11d9f4336a9dd502987704db0","name":"呃呃呃","phoneNumber":"13555555555","password":"5b1b68a9abf4d2cd155c81a9225fd158","birthday":1496160000000,"address":"","vipCard":"000004","customerType":"普通用户","point":"黄寺居委会","createTime":1496196681000,"balance":0.0,"externalVipCard":"000004"},{"id":"9482a7809788430abe9c141a62ac2ad5","name":"哦哦哦","phoneNumber":"14666666666","password":"f379eaf3c831b04de153469d1bec345e","birthday":1494345600000,"address":"","vipCard":"000013","customerType":"普通用户","point":"黄寺3号院","createTime":1496196991000,"balance":0.0,"externalVipCard":"000013"},{"id":"9886fec904ac45e69a7e6a119df038e7","name":"唐松","phoneNumber":"18612462979","password":"b46067134d8aa00b75c80825c8f6cdc4","birthday":694713600000,"address":"北京市昌平区","vipCard":"000001","customerType":"普通用户","point":"爱心家园","createTime":1496193583000,"balance":200.0,"externalVipCard":"000001"},{"id":"9f9b6b1158514df696bbf7fc657ec8fc","name":"iii","phoneNumber":"13999999999","password":"52c69e3a57331081823331c4e69d3f2e","birthday":1493654400000,"address":"","vipCard":"000016","customerType":"普通用户","point":"黄寺3号院","createTime":1496196834000,"balance":0.0,"externalVipCard":"000016"},{"id":"a008a1c49fa44c6cbb48b99275aeb7d0","name":"噌噌噌","phoneNumber":"13333333333","password":"1a100d2c0dab19c4430e7d73762b3423","birthday":1496160000000,"address":"","vipCard":"000006","customerType":"普通用户","point":"京客隆","createTime":1496196618000,"balance":0.0,"externalVipCard":"000006"},{"id":"c91182dda6824436bf07a11c6c56e1c2","name":"买买买","phoneNumber":"14444444444","password":"73882ab1fa529d7273da0db6b49cc4f3","birthday":1494345600000,"address":"","vipCard":"000010","customerType":"普通用户","point":"京客隆","createTime":1496196939000,"balance":0.0,"externalVipCard":"000010"},{"id":"fc44489f7eb84960a392348e1cd702ee","name":"发发发","phoneNumber":"13666666666","password":"f379eaf3c831b04de153469d1bec345e","birthday":1493654400000,"address":"","vipCard":"000014","customerType":"普通用户","point":"黄寺3号院","createTime":1496196719000,"balance":0.0,"externalVipCard":"000014"}],"code":200}
$("#zhezhao").click(function(){
$(".xianshi").css("display","none");
$("#zhezhao").hide();
})
$('#sousuo').bind('input propertychange', function() {
$(".xianshi>ul").children().remove()
var str=$(this).val();
$("#zhezhao").show();
$(".xianshi").css("display","block");
var num=10;
var list="";
for(var i=0;i<data.data.length;i++){
if(data.data[i].vipCard.substr(0,str.length).indexOf(str)!=-1){
list+="<li id='"+data.data[i].id+"' οnclick=add(\'"+JSON.stringify(data.data[i])+"\')>"+data.data[i].vipCard+"</li>";
num--;
if(num==0){
break;
}
}else{
$(".xianshi").css("display","none");
}
}
$(".xianshi>ul").append(list)
var n=1;
if($(".xianshi").css("display")=="block"){
$('#sousuo').keyup(function(event){
var e = event || window.event;
var k = e.keyCode || e.which;
switch(k) {
case 38:
n--;
$(".xianshi>ul>li:nth-child("+n+")").css("background","red");
$(".xianshi>ul>li:nth-child("+n+")").siblings().css("background","#fff");
if(n==1){
n=2;
}
break;
case 40:
$(".xianshi>ul>li:nth-child("+n+")").css("background","red");
$(".xianshi>ul>li:nth-child("+n+")").siblings().css("background","#fff");
if(n==$(".xianshi>ul>li").length){
n=$(".xianshi>ul>li").length-1;
}
n++;
break;
case 13:
n--;
var aa=$(".xianshi>ul>li:nth-child("+n+")").attr("onclick");
var data=JSON.parse(aa.substring(5,aa.length-2));
console.log(data)
$(".xianshi").css("display","none");
$("#zhezhao").css("display","none");
$("#sousuo").val($(".xianshi>ul>li:nth-child("+n+")").text())
break;
}
return false;
})
}
});
function add(data){
var data=JSON.parse(data)
$(".xianshi").css("display","none");
$("#zhezhao").css("display","none");
$("#sousuo").val($("#"+data.id+"").text())
}
</script>
</body>

</html>

记得引入jquery，时时搜索最主要的是基于input propertychange事件，data的json对象是我自己建立的，如果需要交互的话，把操作data的方式放在ajax回调函数里面即可。