Javascript 03：搜索展示

最新推荐文章于 2024-07-12 16:27:40 发布

GGYY__

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量149

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52682120/article/details/124677012

版权

JavaScript 练手项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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()  匹配不到就-1
		   let 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>

GGYY__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 03：搜索展示

1、获得焦点展示onkeyup：当用户释放键盘按钮时执行Javascript代码。onkeyup：当用户离开input输入框时执行一段Javascript代码： <script> //1 展示区的显示与隐藏 //拿到两个元素 let input=document.getElementById("val"); let show=document.getElementById("show"); //1.1获得焦点显示 input
复制链接

扫一扫