jQuery学习：搜索框功能进行其他选项的显示

最新推荐文章于 2023-07-04 09:15:25 发布

¡Venceremo

最新推荐文章于 2023-07-04 09:15:25 发布

阅读量601

点赞数

分类专栏： jquery 文章标签： jquery 学习前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127884866

版权

jquery 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

获取焦点+键盘抬起的时候输入框会显示当输入框失去焦点的时候隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.6.1.js"></script>
	</head>
	<body>
		<div id="search_helper" style="display: none;">显示的列表</div>
		<div class="search">
			<!-- 事件发生的元素  keyup/focus blur-->
			输入框： <input id="txtSearch" type="text" class="text">
			<input type="button" name="button" value="搜索">
		</div>
		<script>
			search();
			//输入搜索关键字 列表显示匹配结果
			function search() {
				//对什么元素监听 对什么元素操作
				//里面的两个函数是一样的 所以不好
				// $('#txtSearch').keyup(function() {}).focus(function() {})
				//使用on解决
				$('#txtSearch').on('keyup focus', function() {
						//如果输入框有文本 才显示列表
						var txt = this.value.trim(); //去除两端空格
						if (txt) {
							$('#search_helper').show()
						}
					
					})
					.blur(function() {
						//隐藏列表
						$('#search_helper').hide()
					})

			}
		</script>
	</body>
</html>