js 实时监听搜索内容

最新推荐文章于 2023-04-12 13:35:22 发布

月弦笙音

最新推荐文章于 2023-04-12 13:35:22 发布

阅读量373

点赞数 1

分类专栏：吃透原生js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_38161537/article/details/126985800

版权

吃透原生js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table tr th,table tr td{
				padding: 10px;
			}
			table{
				margin-bottom: 20px;
			}
		</style>
	</head>
	<body>
	
		<input type="text" name="" id="input" value="" placeholder="请输入查询关键字" />
		<input type="button" name="" id="search" value="搜索" />
		<ul id="list">
			<li>哈哈哈</li>
			<li>啦啦啦</li>
			<li>六六六</li>
			<li>biubiu</li>
			<li>噗噗噗</li>
		</ul>
	</body>
</html>
　　<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
	// 实时监听筛选
	var text = "";  
	setInterval(function(){  
	    text = $('#input').val();//获取文本框输入  
	    if($.trim(text) != ""){  
	            $("#list li").hide().filter(":contains('"+text+"')").show();  
	    }else{  
	        $('#list tr').show();//当删除文本框的内容时，又重新显示表格所有内容  
	    }  
	},100);  
	
	//通过点击按钮开始筛选  
	$(function() {
		$('#search').click(function() {
			var text = $('#input').val(); //获取文本框输入  
			if($.trim(text) != "") {
				$("#table tr:not('#theader')").hide().filter(":contains('" + text + "')").show();
			}
		})
	});
</script>
</body>
</html>