javascript - onmouseout事件和实时搜索ajax

我在实时搜索框和onmouseout事件上遇到问题，在搜索框上键入关键字并显示结果后，我想要我的数据（results）
当我将鼠标悬停在div之外时，如果用户将其慕斯移出div，则消失，则任何结果都不应停留在div上。
我的第一个问题是我的onmouseout事件函数现在正在处理每个结果，这意味着当我将慕斯从第一个木质素结果移到第二个或第三个结果时，它会启用慕斯熄灭效果！
我希望事件适用于整个div，而不是应用于div的各个元素。
我的第二个奇怪的问题是，如果我将慕斯移动到菜单栏中的元素旁边，例如BLOG或LOGIN，它将立即显示结果，它将应用onmouseout事件！就像我的菜单也是一个监听器..根本不应该的..
您能帮我找到解决这些问题的办法吗？
这是我网站的urli，我的网站是基于mvc概念构建的，这是我的脚本
index.html

<form action="" id="searchform" method="POST">

                <p>
                    <input type="text" id="search" placeholder="Chercher" size="30" name="search" size="30" onkeyup="showResult(this.value)">
                    <button type="submit" id="searchsubmit"></button><br />


                </p>

            </form><!--/ #searchform-->

            <div id="livesearch" style="margin-top:-10px; text-align : center;padding:0px 20px 0px 0px ;display : block;width:400px; background: rgba(540, 954, 554, 0.5);" onmouseout ="funcm()"></div>

Ajax调用和onmousseout函数

<script type="text/javascript">


function showResult(str) {
  if (str.length==0) {
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
      document.getElementById("livesearch").style.display = "block";
      document.getElementById("livesearch").style.position = "absolute";


    }
  }
  xmlhttp.open("GET","/search?q="+str,true);
  xmlhttp.send();
}

function changeDisplay(element, display) {

    element.style.display = display;
    return;
}

var dataContainer = document.getElementById("livesearch");
var dataContainer2 = document.getElementById("test");

function funcm() {
    changeDisplay(dataContainer, "none");



}

            </script>

和搜索文件

        $vall  = "<div id='test' style='display : block; position:relative ;><p>";
        if($_GET['q']){
            $this->value = isset($_GET['q']) ? $_GET['q'] : null;
         $val = $this->model->getData($this->value);
        }else{
            $this->value='';
        }
        if(!empty($val ))
        {
        foreach ($val as $key => $valuee){
         $vall .= "<a href='/index'>".$valuee['TitleTag'].'</a><br />';
        }}
        echo $vall.'</p></div>';
    }

我的模型文件

 public function getData($key)
                        {
                           $data;
                           $key = trim(htmlentities(strip_tags($key)));
                                 $sth = $this->db->prepare("SELECT  id FROM mytable WHERE mytitles LIKE '%{$key}%'");
                                                                            $sth->execute();
                                                                            $data = $sth->fetchAll();
                                    return $data;

                        }

最佳答案

第一：
将autocomplete =“ off”属性添加到表单中，这有点烦人

<input id="search" type="text" onkeyup="showResult(this.value)" name="search" size="30" placeholder="Chercher" autocomplete="off">

第二：
将较高的z-index设置为#livesearch并将显示样式更改为display：none

<div id="livesearch" style="margin-top: -10px; text-align: center; padding: 0px 20px 0px 0px; width: 400px; background: rgba(255, 255, 255, 0.5) none repeat scroll 0% 0%; position: absolute; border: 0px none; display: none; z-index: 9999;">

第三：
删除内联onmouseout =“ funcm（）”并在ajax调用下面添加此代码

var livesearch = document.getElementById('livesearch');
livesearch.addEventListener('mouseover', function(e) {
  e.preventDefault();
  changeDisplay(this, "block");
}, false);

livesearch.addEventListener('mouseout', function(e) {
  e.preventDefault();
  changeDisplay(this, "none");
}, false);

对我来说，它可以在您的页面上运行，我已经检查了萤火虫。

关于javascript - onmouseout事件和实时搜索ajax，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32358786/