Question

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

我希望能够在将文本输入搜索栏时过滤联系人表格。（例如，如果在搜索栏中输入“Fran”，您只会在其名称中看到“Fran”的联系人。如果“Fran”被删除，则所有会返回默认值。）

这可能吗？怎么样？（我发现了一个即时搜索diy指南，但它只能按照谷歌的方式运行，搜索栏下方有一个下拉列表。）

Answer 1

我建议使用this jquery plugin，它不需要ajax或服务器通信，只需在每次按键时根据输入框内容过滤渲染表。

确保在项目中还包含jquery库以及此插件，以便工作。

Answer 2

你可以尝试jQuery auto complete plugin用于相同的

Answer 3

以下包含您需要的基本逻辑，尽管它是相反的 - 它隐藏了它找到的内容，并且仅用于完全匹配。此外，它是一个按键事件，所以它只在你输入空格后输入空格后隐藏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>

Answer 4

以下是一些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>

PHP / Javascript - 即时搜索，但不同？

4 个答案: