模拟搜索框

置顶飞鱼同学

已于 2022-04-25 11:28:54 修改

阅读量5k

点赞数 4

分类专栏：前端页面

于 2021-01-24 21:53:58 首次发布

本文链接：https://blog.csdn.net/qq_42487459/article/details/113098187

版权

js css html5

前端页面专栏收录该内容

15 篇文章 0 订阅

订阅专栏

搜索框的制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>搜索框</title>
		<style type="text/css">
			.one{
				margin: 0px auto;
				padding: 0px 0px;
				width: 225px;
			}
			.one1{
				margin: 2px auto;
				padding: 0px 0px;
				width: 225px;
				height: auto;
				border: 1px solid gainsboro;
				display: none;
			}
			p{
				margin:  0 0;
				padding: 0 0;
			}
		</style>
	</head>
	<body>
		<div class="one">
			<div id="">
				<input type="text" id="val" placeholder="请输入内容"/>
				<input type="submit" value="搜索" id="sub"/>
			</div>
			<div class="one1" id="show"></div>
		</div>
		<script>
			let arr = ['数据库 299元','计算机网络 199元','计算机组成原理 300元',
			'java实践课程 500元','大学英语 150元','软件工程 230元','web前端 150元',
			'ps实践与理论 139元','java ee企业级框架 459元','框架技术 249元'];
			//逻辑：1.展示区域的显示与隐藏
			let inpu = document.getElementById('val');
			let show = document.getElementById('show');
			inpu.onkeyup = function(){
				show.style.display = 'block';//隐藏
				//input.value 和数据进行比较，并将得到的结果放到str中
				let str ='';
				arr.forEach((item)=>{
					let res = item.indexOf(inpu.value);
					if (res !=-1) {
					//拼接在p标签里面
						str += '<p>'+item+'<p>'
					}
				})
				//判断，匹配结果为空或者不存在，给出提示，没有判断，当输入框为空时显示全部数据
				if(!inpu.value || !str){
					show.innerHTML='<p>您输入的内容不存在<p>'
				}else{
					show.innerHTML = str;
				}
			}
			inpu.onblur = function(){
				show.style.display = 'none';
				inpu.value = '';
			}
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述
喜欢的朋友请点赞＋关注，谢谢！！！

飞鱼同学

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
模拟搜索框

搜索框的制作<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>搜索框</title> <style type="text/css"> .one{ margin: 0px auto; padding: 0px 0px; width: 225px; } .one1{ margin: 2px au
复制链接

扫一扫