js简单搜索功能
利⽤数组⾥⾯的数据,实现⼀个简单的搜索功能。
<style>
.content{
width:500px;
margin:40px auto;
}
.search{
width: 400px;
overflow: hidden;
}
.
search input{
float: left;
}
#val{
height: 35px;
width: 300px;
padding-left: 10px;
}
#sub{
height: 40px;
width: 80px;
margin-left: 3px;
font-size: 20px;
}
.show{
width: 302px;
height: 300px;
border: 1px solid #ccc;
padding-left: 10px;
display: none;
}
.show p{
font-size: 12px;
}
</style>
<body>
<div class="content">
<div class="search">
<input type="text" id="val" placeholder="请输⼊搜索内容">
<input type="submit" id="sub">
</div>
<div id="show" class="show">
<!-- 搜索内容显⽰区域 -->
input绑定onblur事件</div>
</div>
<script type="text/javascript">
//创建⼀个数组,⾥⾯放数据
let arr = ['HTML','CSS','javaScript','jQuery','bootstrap','vue','ajax','project','git','node','linux','ps']; // 获取输⼊框
let input = ElementById('val');
// 获取由于div组成的搜索框内容区域
let show = ElementById('show');
// 当释放键盘按钮时执⾏
// 改变搜索框内容的display属性,来显⽰内容
show.style.display = 'block';
// input.value 和 arr的每⼀项进⾏匹配 indexOf() 匹配不到返回-1 let str = '';
arr.forEach((item)=>{
let res = item.indexOf(input.value);
if(res != -1){
str += '<p>'+item+'</p>';
}
})
// 如果没有内容就显⽰没有结果
if(!input.value || !str){
show.innerHTML = '<p>暂⽆结果</p>'
}else{
show.innerHTML = str;
}
}
// 当⽤户离开input输⼊框时执⾏,失去焦点,清除搜索框内容
show.style.display = 'none';
input.value = '';
}
</script>
</body>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论