js 实时监听搜索内容

时间 2019-12-04
原文原文链接
<!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>
&emsp;&emsp;<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>


复制代码