javascript - PHP Ajax 实时搜索框

Question

我正在尝试制作一个 PHP Ajax 实时搜索框，到目前为止运行良好，但似乎我面临两个问题:

• 第一个是当数据显示在屏幕上时，如果我将鼠标移到搜索框之外，我希望它消失。
• 第二个与CSS有关，我希望数据结果的位置正好在我的搜索框下方，现在向右浮动。

代码如下:

<div class="widget-container widget_search">
        <span class="adds"></span>
        <form action="" id="searchform" method="POST">
            <p>
                <input type="text" id="search" placeholder="Chercher" size="30" name="search">
                <button type="submit" id="searchsubmit"></button>
            </p>
        </form><!--/ #searchform-->

        <div id="livesearch" style=" width:auto; height:auto; margin:auto;  position: absolute;"></div>
    </div><!--/ .widget-container-->

JS:

$(document).ready(function(){
    $("#search").keyup(function(){
        var valor = $("#search").val();
            $.ajax({
                type: "POST",
                url: "/auto/search/",
                data: {word:valor},
                success: function(res) {
                    $('#livesearch').html(res);
                }
            });
    });
});

Answer 1

假设数据容器有一个 ID，例如 "myid" 。然后，你可以像这样隐藏它:

document.getElementById('myid').style.display = "none";

您可以像这样使其可见:

document.getElementById('myid').style.display = "block";

要使其通用，您可以执行以下操作:

function changeDisplay(element, display) {
    element.style.display = display;
}

您可以像这样存储数据容器:

var dataContainer = document.getElementById("myid");

现在，您想在鼠标离开时隐藏它。因此，您需要设置onmouseout您的搜索框的功能如下:

function left() {
    changeDisplay(dataContainer, "none");
}

但是您可能希望当您将鼠标悬停在该元素上时使其重新出现。所以你需要设置onmouseover事件到这样的函数:

function entered() {
    changeDisplay(dataContainer, "block");
}

关于定位结果，您可以考虑添加 <br>在搜索标记之后，然后将其放置在左侧。