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">
<!-- 搜索内容显示区域 -->
</div>
</div>
<script type="text/javascript">
//创建一个数组，里面放数据
let arr = ['HTML','CSS','javaScript','jQuery','bootstrap','vue','ajax','project','git','node','linux','ps'];
// 获取输入框
let input = document.getElementById('val');
// 获取由于div组成的搜索框内容区域
let show = document.getElementById('show');
// 当释放键盘按钮时执行
input.onkeyup = function(){
// 改变搜索框内容的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输入框时执行,失去焦点，清除搜索框内容
input.onblur = function(){
show.style.display = 'none';
input.value = '';
}
</script>
</body>
