Javascript 03：搜索展示"/>
Javascript 03：搜索展示
1、获得焦点展示
onkeyup：当用户释放键盘按钮时执行Javascript代码。
onkeyup：当用户离开input输入框时执行一段Javascript代码：
<script>//1 展示区的显示与隐藏//拿到两个元素let input=document.getElementById("val");let show=document.getElementById("show");//1.1获得焦点显示input.onkeyup=function(){show.style.display="block";}//1.2 失去焦点隐藏input.onblur=function(){show.style.display="none";//清空搜索栏input.value="";} </script>
2、数组 indexOf()
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。
<script>let arr=["java从入门到精通 1999元","web开发技术 2999元","html基础技术 299元", "CSS样式设计技术 398元", "javascript高级技术 988元"];let input=document.getElementById("val");let str="";arr.forEach((item)=>{//包含判断let res=item.indexOf(input.value);if(res!=-1){str+="<p>"+item+"</p>";}})</script>
3、Boolean
如果布尔对象无初始值或者其值为:
0
-0
null
“”
false
undefined
NaN
那么对象的值为 false。
完整代码
<body><div id="content"><div class="search"><input type="text" id="val" placeholder="请输入课程" /><input type="submit"/></div><div class="show" id="show"></div></div><script>let arr=["java从入门到精通 1999元","web开发技术 2999元","html基础技术 299元", "CSS样式设计技术 398元", "javascript高级技术 988元"];//1 展示区的显示与隐藏//拿到两个元素let input=document.getElementById("val");let show=document.getElementById("show");//1.1获得焦点显示input.onkeyup=function(){debugger;show.style.display="block";//2 元素匹配// input.value 和 arr数组中的每一位进行匹配 indexOf() 匹配不到就-1let str="";arr.forEach((item)=>{//包含判断let res=item.indexOf(input.value);if(res!=-1){str+="<p>"+item+"</p>";}})//如果input.value 即搜索不到 或者 str为false 提醒用户if(!input.value || !str){show.innerHTML="<p>暂无结果</p>";} else{show.innerHTML=str;}}//1.2 失去焦点隐藏input.onblur=function(){show.style.display="none";//清空搜索栏input.value="";}</script></body>
</html>
<style>*{margin: 0px;padding: 0px;}#content{width: 230px;height: 250px;/* border: 1px solid rosybrown; */margin: 0px auto;}.show{width: 165px;height: 200px;border: 1px solid rosybrown;display: none;}
</style>
更多推荐
Javascript 03：搜索展示
发布评论