<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #ccc;
}
.content {
width: 400px;
height: 600px;
margin: 100px auto;
}
.serach {
height: 30px;
display: flex;
}
#val {
width: 150px;
height: 94%;
padding-left: 5px;
border: 1px solid rgb(106, 102, 102);
}
#sub {
height: 115%;
margin-left: 5px;
}
.show {
display: inline;
width: 161px;
font-size: 10px;
height: 300px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="content">
<div class="serach">
<input type="text" id="val" placeholder="请输入课程">
<input type="submit" id="sub">
</div>
<div class="show" id="show"></div>
</div>
<script>
let arr = ['web前端精英培训班 980元','html核心技术 199元','css核心技术 299元','html核心技术 199元','vue核心技术 599元','html+css核心技术 299元','web前端在线商城 99元','Javascript高级技术 899元','Javascript核心技术 399元'];
//逻辑:1.先完成 展示区域的显示或隐藏
let input = document.getElementById('val');
let show = document.getElementById('show');
//onkeyup鼠标键盘按键被松开时事件
input.onkeyup = function(){
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>';
}
})
// console.log(str);
//如果input.value的值为空或者 str为false 给用户一个提示
if(!input.value || !str){
show.innerHTML = '<p>暂无结果</p>'
}
else {
show.innerHTML = str
}
}
//onblur鼠标失去焦点事件
input.onblur = function(){
show.style.display = 'none';
input.value = ''
}
</script>
</body>
</html>
每天一个效果 :(3)百度搜索数据显示
最新推荐文章于 2024-08-24 12:37:57 发布