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:
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);
}
});
});
});
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.
using jquery: livesearch-id of div (search box) one-id of div where search elements are being showed $("#livesearch").mouseout(function(){$('#one').hide(); //hides the div }); $("#livesearch").mouseover(function(){$('#one').show(); //shows the div when mouse is pointed again });
CSS: set style="margin-left:(number) px;"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.