JavaScript实现搜索功能

最新推荐文章于 2024-07-25 11:52:08 发布

hongchen_lian

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量1w

点赞数 9

文章标签： html javascript

本文链接：https://blog.csdn.net/hongchen_lian/article/details/103905312

版权

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>

hongchen_lian

关注

9
点赞
踩
60

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现搜索功能

JavaScript实现搜索功能实现效果代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>搜索功能实现</title> <style type="text/css"> *{ margin: 0; ...
复制链接

扫一扫