PHP Ajax实时搜索框

Question

I am trying to make a PHP Ajax live search Box, so far is working good but it seems that I am facing two problems:

• The first one is that when data is showing on the screen, I want it to disappear if I move the mouse outside the search box.
• The second one is related to CSS, I want the position of data results to be just under my search box, now is floating right.

Here the code:

<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

Let'suppose the data container has an id, like "myid". Then, you can hide it like this:

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

You can make it visible like this:

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

To make this general, you can do something like this:

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

You can store the data container like this:

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

Now, you want to hide it when the mouse leaves. So, you need to set the onmouseout of your search box to a function like this:

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

But you probably want to make it reappear when you hover to the element. So you need to set the onmouseover event to a function like this:

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

As about positioning the results, you might consider adding a <br> after the search tag and then position it to the left.