当前位置：文江博客话题详情

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

发布于 2024-10-13 04:33:41 字数 236 浏览 8 评论 0原文

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

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

这可能吗？怎么做？（我找到了一个即时搜索DIY指南，但它只能按照Google的方式工作，在搜索栏下方有一个下拉菜单。）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌辣 2024-10-20 04:33:41

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

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

回复收藏 0 原文

夏有森光若流苏 2024-10-20 04:33:41

您可以尝试使用 jQuery 自动完成插件来实现相同的效果

回复收藏 0 原文

不及他 2024-10-20 04:33:41

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

The following contains the basic logic you need although it's the reverse - it hides content that it finds and only for exact matches. Also, it's an on keypress event so it only hides the divs after you hit space after typing the name so you'll need to tweak that too.
To look for matches within a long string of text, you will need to use some regex to test against the search string.

<!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>

回复收藏 0 原文

风柔一江水 2024-10-20 04:33:41

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

Here is some example Javascript for you:

<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>

回复收藏 0 原文

~没有更多了~