JavaScript实例之搜索框

最新推荐文章于 2024-06-28 13:39:22 发布

却没能成为自己

最新推荐文章于 2024-06-28 13:39:22 发布

阅读量175

点赞数

分类专栏：学习 Java JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_15971099/article/details/127232953

版权

本文介绍了如何使用JavaScript创建一个搜索框功能，包括源代码展示和实际效果的呈现。

摘要由CSDN通过智能技术生成

JavaScript实例之搜索框

源码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			.content {
				width: 500px;
				margin: 40px auto;
			}

			.search {
				width: 400px;
				overflow: hidden;

			}

			.search input {
				float: left;
			}

			#val {
				height: 35px;
				width: 300px;
				padding-left: 10px;
			}

			#sub {
				height: 40px;
				width: 80px;
				margin-left: 3px;
				font-size: 20px;
			}

			.show {
				width: 302px;
				height: 300px;
				border: 1px solid #ccc;
				padding-left: 10px;
				display: none;
			}

			.show p {
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="search">
				<input type="text" id="val" placeholder="请输入课程">
				<inp