1

我有一个带有空白搜索栏的页面，然后在表格下方有一堆联系人。每个联系人是一个 div。

我希望能够在将文本输入搜索栏中时过滤联系人表。（因此，例如，如果在搜索栏中输入“Fran”，您只会看到姓名中带有“Fran”的联系人。如果“Fran”被删除，所有联系人都会恢复默认值。）

这可能吗？如何？（我找到了一个即时搜索 diy 指南，但它只能像谷歌那样工作，在搜索栏下方有一个下拉菜单。）

4

4 回答 4

2

我建议使用这个 jquery 插件，它不需要 ajax 或服务器通信，它只是在每次击键时根据输入框内容过滤呈现的表。

确保在您的项目中还包含 jquery 库以及此插件以使其正常工作。

于 2011-01-19T05:24:20.560 回答
0

下面是一些 Javascript 示例：

<script type="text/javascript">
$(document).ready(function() {
    $("#search").keyup(function() {
        // Get the search value
        var searchValue = $(this).val();

        // If no value exists then show all divs
        if(searchValue === "") {
            $(".your_div").show();
            return;
        }

        // Initially hide all divs
        $(".your_div").hide();

        // Now show any that contain the search value
        $(".your_div:contains('" + searchValue + "').show();
    }); 
}); 
</script>
于 2011-01-19T09:19:00.527 回答
0

以下包含您需要的基本逻辑，尽管它是相反的 - 它隐藏了它找到的内容并且仅用于完全匹配。此外，它是一个按键事件，因此它只会在您输入名称后按空格后隐藏 div，因此您也需要对其进行调整。要在一长串文本中查找匹配项，您需要使用一些正则表达式来针对搜索字符串进行测试。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Search</title>
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
    <script>            
        $(document).ready(function(){
                $(".searchbox").keypress(function(){
                      $("div").each(function(){
                    if($(this).text() == $(".searchbox").val()){
                        $(this).hide("fast");
                    };
                      });
                });
            });
    </script>
    </head>
    <body>
    <form><input type="text" class="searchbox"></form>
        <div>Susan</div>
        <div>Fran</div>
        <div>Dave</div>
    </body>
    </head>
</html>
于 2011-01-19T06:29:57.250 回答
0

您可以尝试相同的jQuery自动完成插件

于 2011-01-19T05:24:54.557 回答