JQuery 模糊匹配

最新推荐文章于 2020-12-24 16:04:50 发布

夏已微凉、

最新推荐文章于 2020-12-24 16:04:50 发布

阅读量776

点赞数

分类专栏： # Js（JQuery）文章标签： JQuery

本文链接：https://blog.csdn.net/qq_36025814/article/details/88249086

版权

Js（JQuery）专栏收录该内容

56 篇文章 2 订阅

订阅专栏

JQuery 模糊匹配

1、效果

2、代码

<style>
a{
	text-decoration:none;
}
.problem-li{
	display:block;
	width:200px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<div style="margin:20px;width:300px;">
	<input id="search" type="search" placeholder="请输入搜索内容"><br/><hr/>

	<div>静夜思  李白</div><hr/>
	<div class="problem-list">
		<a href='javascript:void(0);' class='problem-li'>
			<text>
				床前明月光，
			</text>
		</a>
		<a href='javascript:void(0);' class='problem-li'>
			<text>
				疑是地上霜。
			</text>
		</a>
		<a href='javascript:void(0);' class='problem-li'>
			<text>
				举头望明月，
			</text>
		</a>
		<a href='javascript:void(0);' class='problem-li'>
			<text>
				低头思故乡。
			</text>
		</a>
	</div>
</div>

<script>
//搜索操作
function searchList(){
	var searchText = $(this).val();//获取输入的搜索内容
    var $searchLi = "";//预备对象，用于存储匹配出的li
    if (searchText != "") {
    	 $('.problem-li').hide();//将原有的内容隐藏
		$('.problem-li').filter(":Contains(" + searchText + ")").show();	//获取所有匹配的li
	}else{
		$('.problem-li').show();//将原有的内容隐藏
	}
}
$('#search').on("keyup", searchList).trigger('keyup');
</script>