Question

我在实时搜索框和onmouseout事件中遇到问题，在搜索框中键入关键字并显示结果后我想要我的数据（结果）一旦我徘徊在div之外就消失了，如果用户将他的慕斯移出div，则不应该留在div中。我的第一个问题是我的onmouseout事件函数现在正在处理每一个结果，这意味着当我将我的慕斯从第一个ligne结果移动到第二个或第三个...它启用了慕斯出效果！我希望事件申请整个div而不是我div的个别元素。我的第二个奇怪的问题，一旦结果显示，如果我移动我的慕斯旁边的菜单栏ex：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 call和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;

                        }

Answer 1

第一：将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);

对我而言，它适用于您的页面，我已经检查过萤火虫。

onmousseout事件和实时搜索ajax

1 个答案: