PHP Ajax的實時搜索框

我試圖讓PHP的Ajax實時搜索框，到目前爲止是工作不錯，但似乎我現在面臨兩個問題：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); 
       } 
      }); 
    }); 
});

來源

2015-08-16 Enigma

首先，當鼠標移出時，不希望結果消失，當你點擊其他任何地方時，結果應該消失，其次，用你的css設置一個小提琴，這樣你可以得到更多的幫助。 – slash197

Let'suppose數據容器有一個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>，然後將其放置到左邊。

來源

2015-08-16 09:29:59

使用jQuery：DIV（搜索框），其中搜索元素被顯示的div 一個-ID的實況搜索-ID $（「＃實況搜索」）鼠標移出（函數（）{$（'＃一個人。）.hide（）; //隱藏div }）; （）＃$（「＃livesearch」）。mouseover（function（）{$（'＃one'）。show（）; //顯示當鼠標再次被指向時的div }）;

CSS： set style =「margin-left：（number）px;」

來源

2015-08-18 13:01:52

PHP Ajax的實時搜索框

回答

相關問題