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的实时搜索框

回答

相关问题