利用javascript实现页面内容筛选

在页面中，我们可以利用javascript实现很丰富的效果。例如内容的筛选

1. 我们来下面的页面

我们希望在关键字框中输入任何的关键字后，就能动态过滤掉下面的一些内容。如下图

2. 首先，我们要知道，要监控到用户在关键字框输入的东西，那么就需要订阅一个事件，通常是keyup事件，就是按钮弹起的时候进行搜索

                $("li").filter(function(index) {
                    return $(this).text().indexOf(input) >= 0;
                }).css("display", "block");
            }
            else
                $("li").css("display", "block");
        });
    });
</script>

3. 完整代码如下，包含源文件。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication3.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery-1.3.2-vsdoc.js">
    </script>
    <script language="javascript" type="text/javascript">
        $(function() {
            $("#search").keyup(function() {
                var input = $(this).val();

if (input.length > 0) {
$("li").css("display", "none");

                    $("li").filter(function(index) {
                        return $(this).text().indexOf(input) >= 0;
                    }).css("display", "block");
                }
                else
                    $("li").css("display", "block");
            });
        });
    </script>
</head>
<body>
                请输入关键字:<input type="text" >http://www.uddi.org/</a></li>
                </ul>
                <hr />

</body>
</html>

4. 另外一个问题

在做这个例子的时候，我最开始想到的是，利用jquery中选择器的一个特殊语法 :contains

看起来正好满足要求，但却达不到我们的目的，因为这个语法接受的筛选字符串必须是固定的，不能动态指定。所以，我还是用了filter函数