contains实现简单搜索

最新推荐文章于 2022-10-18 09:14:52 发布

原创最新推荐文章于 2022-10-18 09:14:52 发布 · 304 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

63 篇文章

订阅专栏

本页面提供了一个简单的搜索功能，用户只需输入搜索内容，即可实时查看与之匹配的段落，并通过颜色区分显示。

<html>
<head>
<title>提示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<script>

//jQuery :contains
$(function(){
	 $("#ddd").focus();
	$("#ddd").keyup(function(e) {
		//alert("44555");
       var val= $(this).val();
	   if(val==""){
		   window.location.reload();
		
		   }
	   $("p:contains("+val+")").css("color","red");
    });
})
</script>
<body>
<input type="text" placeholder="请输入搜索内容" id="ddd"/>
<ul><li>
<p>胜多负少东方闪电发送到</p>
<p>aaaaaaaaaa</p>
<p>bbbbbbbbbbb</p>
<p>cccccccccccc</p>
<p>ddddddddd</p>
</li></ul>
</body>


</html>