提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery模糊查询--搜索demo效果示例（整理）

jQuery搜索 -- 查询 示例 效果 整理 Demo
2023-09-14 09:04:05 时间 
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery模糊查询</title>
		<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}
		</style>
	</head>
	<body>
		<div>
			筛选：<input id="filterName">
		</div>
		<ul>
			<li>你好</li>
			<li>测试</li>
			<li>国家</li>
			<li>人民</li>
			<li>共产党</li>
			<li>你是谁</li>
			<li>你好啊你还是舍</li>
			<li>的分配给花生豆</li>
			<li>我是土豆</li>
			<li>呼叫东东1</li>
			<li>测试加1</li>
		</ul>

		<script>
			$(function() {
				$("#filterName").keyup(function() {
					$("ul>li")
						.hide()
						.filter(":contains('" + ($(this).val()) + "')")
						.show();
				});
			});
		</script>

	</body>
</html>

 

 

相关文章