好资源导航 » 文章资讯 » js实现搜索提示框效果

js实现搜索提示框效果

2023-07-17 03:52:04 337

本文实例为大家分享了js实现搜索提示框效果的具体代码，供大家参考，具体内容如下

首先写静态页面

CSS样式

*{
margin:0;
padding:0;
}

html,
body{
background:darkgray;
}

.container{
position:absolute;
left:50%;
top:50px;
transform:translateX(-50%);
}

#search{
width:300px;
height:50px;
padding-left:10px;
border-radius:5px;
border:none;
outline:none;
}

#alert{
width:312px;
position:relative;
left:-1px;
display:none;/*将ul列表隐藏*/
}

#alert>ul{
list-style:none;
margin:0;
padding:0;
}

#alert>ul>li{
border:0.5pxsolid#000;
height:40px;
line-height:40px;
padding-left:10px;
border-radius:5px;
background:#fff;
}

#alert>ul:last-child{
border-bottom:1pxsolid#000;
}

JS代码

var$search=$("#search");
var$alert=$("#alert");
var$alertUl=$("#alert>ul");

//清空列表的方法
functionclearUl(){
$alertUl.empty();
}

$search
.bind("input",function(){
//清空列表
clearUl();

//获取到用户所输入的内容
varvalue=$(this).val();
//console.log(value);

//使用getJSON方法获取json数据
$.getJSON("data/server4.json",function(data){
//console.log(data);
//获取到json数据中的name值
$.each(data,function(input,obj){
//console.log(obj);
varname=obj.name;
//console.log(name);

if(name.indexOf(value)>=0){
//表示输入的内容在name中存在
varvalueArr=obj.value;
//console.log(valueArr);
$.each(valueArr,function(input,text){
//console.log(text);
//将数据添加到HTML页面
$alertUl.append(`${text}`);
});
}
});
});

//将ul列表显示出来
$alert.css("display","block");
})
.bind("blur",function(){
$alert.css("display","none");
});

实现效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现搜索提示框效果

热门推荐

随机推荐