时间戳

首页 > 解决方案 > 隐藏

当 document.click 时，显示
当搜索框点击时（php mysql）

javascript - 隐藏
当 document.click 时，显示
当搜索框点击时（php mysql）

问题描述

我有一个从 MySQL 数据库动态填充的搜索框。当用户键入内容时，它将搜索数据库并使用 jquery，并使用 ajax 显示搜索结果。因为搜索结果通过 z-index 设置了显示优先级，所以搜索结果显示在其他表单元素的顶部。所以我正在做的是当用户点击文档时，显示搜索结果（如果有的话）将被隐藏。然后，当用户返回开始再次在搜索框中输入时，它会再次显示。

然而，我面临的问题是我的代码的最后一部分，当用户单击 results 中的 p.result 项目时，它应该获取 p.result 并将其放入 . 点击 p.result 后，什么也没有发生。结果未插入到输入字段中。

<script type="text/javascript">
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */

        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("backend-search.php", {term: inputVal}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);

            });
               $(".search-box").click(function(e){
                     $(".result").show();
                      e.stopPropagation();
                });
                $(document).click(function(){
                      $(".result").hide();
                });

        } else{
            resultDropdown.empty();
        }

    });

$('.result').on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});

</script>
</head>
<body>
    <div class="search-box">
        <input type="text" autocomplete="off" placeholder="Search country..." />
        <div class="result"></div>
    </div>
</body>

请注意，其他一切工作正常。从上面删除以下代码后，它工作正常。

    $(".search-box").click(function(e){
                 $(".result").show();
                  e.stopPropagation();
            });
            $(document).click(function(){
                  $(".result").hide();
            });

.result 是结果框 div 容器 .search-box 是包含所有内容的 div 容器。

如果有人有任何想法可以帮助我解决这个问题，我将不胜感激。

标签： javascriptphpjqueryajax

解决方案

推荐阅读