Question

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

但是，我面临的问题是代码的最后一部分，当用户单击结果中的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容器。

如果有人有什么想法可以帮助我清除此ID，请非常感激。

在document.click时隐藏<div>，在搜索框单击时显示<div>（php mysql）

0 个答案: