JavaScript实现搜索功能

JavaScript实现搜索功能

实现效果

在这里插入图片描述

代码如下
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>搜索功能实现</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#box{
				width: 600px;
				border: 1px solid #000000;
				margin: 20px auto;
				padding: 20px 30px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<p>
				<input type="text" name="" id="input-com" value="" />
				<button id="an">搜素</button>
			</p>
			<ul id="conter"></ul>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				//定义原始数据
				var searchList = ["王者荣耀","刺激战场","英雄联盟","全军出击","地下城勇士"];
				//获取ul
				var oul = document.getElementById("conter");
				//搜索按钮的点击事件
				document.getElementById("an").onclick = function(){
					//获取input框的value值
					var inputcom = document.getElementById("input-com").value;
					//定义新数组,保存符合搜索内容要求的数据
					var a = [];
					var k = 0;
					//循环判断符合要求的数据
					for(var j = 0;j < searchList.length;j ++){
						//数据中不包含搜索内容值的返回-1
						if(searchList[j].indexOf(inputcom) != -1){
							a[k++] = searchList[j];
						}
					}
					//清空ul里面的内容
					document.getElementById("conter").innerHTML = "";
					//循环将数据输出到ul下
					for(var p = 0;p < a.length;p ++){
						//创建li
						let oli = document.createElement("li");
						//定义li里的内容
						oli.innerHTML = a[p];
						//将li添加到ul里
						oul.appendChild(oli);
					}
				};
				//循环将数据渲染到ul下
				for(var i = 0;i < searchList.length;i ++){
					let oli = document.createElement("li");
					oli.innerHTML = searchList[i];
					oul.appendChild(oli);
				}
			}
		</script>
	</body>
</html>

  • 9
    点赞
  • 60
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值