Question

我已经使用javascript实现了即时搜索，我能够让它在某一点上起作用。

我已经在我的即时搜索中实现了以下功能，并且工作正常。

结果出现在“搜索结果”div中。
点击文档结果消息时的任何位置。
将鼠标悬停在或单击输入字段结果reapper。
在文档点击后重新出现结果的褪色效果。

这1.实施不正常。

对结果消失器添加了淡入淡出效果。单击文件时第一次使用淡入淡出效果但是鼠标悬停或点击输入字段结果后再出现，则点击文件结果不会消失且无效。

这些是我的Javascript代码。

<script type="text/javascript">
    function showResult(str)
    {
        if (str.length==0)
        {
            document.getElementById("search-result").innerHTML="";
            document.getElementById("search-result").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("search-result").innerHTML=xmlhttp.responseText;
                document.getElementById("search-result").style.border="1px solid #A5ACB2";
                document.getElementById("search-result").autocomplete="off";
                document.getElementById("search-result").style.display="block";
                var fired = false;

                document.onclick = function(){
                    close_box();
                    if(!fired){
                        document.getElementById("search-input").onmouseenter = function(){
                        show_box_fadeIn()
                        delete this.onmouseenter;};
            };
        }
        document.getElementById("search-input").onmouseleave = function(){
            var fired = true;
            if(fired){
                document.getElementById("search-input").onmouseenter = function(){
                show_box()};
        };
    }

    document.getElementById("search-input").onclick = function(e){
        if(!e) {
            e = window.event;
        }
        if(e.stopPropagation && e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        } else {
            e.cancelBubble = true;
            e.returnValue = false;
        }show_box(); return true;
    };

    //////////EVENTS AFTER DOCUMENT ONCLICK//////////
    var fired = false;
    var closeBox = false;
    document.onclick = function(){
        if(!closeBox){
            close_box_fadeOut();
        }
        if(!fired){
            document.getElementById("search-input").onmouseenter = function(){
                show_box_fadeIn()
                delete this.onmouseenter;};
            };
        }
        document.getElementById("search-input").onmouseleave = function()
        {
            var fired = true;
            if(fired){
                document.getElementById("search-input").onmouseenter = function(){show_box()};
            };
        }
        }
        }
       xmlhttp.open("GET","instant-search.php?keyword="+str,true);
       xmlhttp.send();
       } 



    //////////FUNCTIONS//////////
    function show_box(){
        document.getElementById("search-result").style.display="block";

    }
    function show_box_fadeIn(){
        setOpacity( 0 );
        document.getElementById("search-result").style.display="block";
        fadeIn()
    }
    function close_box(){
        document.getElementById("search-result").style.display="none";
    }
    function close_box_fadeOut(){
        if(closeBox){
            document.onclick = function(){close_box();}
            return;
        }
        closeBox = true;    
        setOpacity( 100 );
        document.getElementById("search-result").style.display="block";
        fadeOut();
        setTimeout(close_box, 800);
    }
    function setOpacity( value ) {
        document.getElementById("search-result").style.opacity = value / 10;
        document.getElementById("search-result").style.filter = 'alpha(opacity=' + value * 10 + ')';
    }
    function fadeIn() {
        for( var i = 0 ; i <= 100 ; i++ )
        setTimeout( 'setOpacity(' + (i / 10) + ')' , 10 * i );
    }
    function fadeOut() {
        for( var i = 0 ; i <= 100 ; i++ ) 
        setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
    }
</script>

html代码。

<input name="keyword" type="text" size="50" id="search-input" value = 'Search'; onkeydown="showResult(this.value)" /></br></br>

请建议任何可行的方法，我希望有人可以帮助我。

感谢。

Answer 1

终于明白了，希望这也有助于其他人。

    function showResult(str)
{
 if (str.length==0)
 {
    document.getElementById("search-result").innerHTML="";
    document.getElementById("search-result").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("search-result").innerHTML=xmlhttp.responseText;
    document.getElementById("search-result").style.border="1px solid #A5ACB2";
    document.getElementById("search-result").autocomplete="off";
    document.getElementById("search-result").style.display="block";
    var fired  = false;
    var closeBox = false;
    document.onclick = function()
     {
        if(closeBox){
        return;
        }else{close_box_fadeOut();closeBox = true;}
        if(!fired)
        {
    document.getElementById("search-input").onmouseenter = function(){
        show_box_fadeIn();  delete this.onmouseenter;};
        };
     }
    document.getElementById("search-input").onmouseleave = function()
     {
        var fired = true;
        if(fired){
              document.getElementById("search-input").onmouseenter = function(){show_box()};
                 };closeBox = false;
      }
    document.getElementById("search-input").onclick = function(e)
     {
        if(!e) {
        e = window.event;
        }

        if(e.stopPropagation && e.preventDefault) {
        e.stopPropagation();
        e.preventDefault();
        } else {
        e.cancelBubble = true;
        e.returnValue = false;
        }show_box(); return true;
     }
  }
}
xmlhttp.open("GET","instant-search.php?keyword="+str,true);
xmlhttp.send();
}
function show_box(){
    document.getElementById("search-result").style.display="block";
}
function show_box_fadeIn(){
    setOpacity( 0 );
    document.getElementById("search-result").style.display="block";
    fadeIn()
}
function close_box(){
    document.getElementById("search-result").style.display="none";
}
function close_box_fadeOut(){
    setOpacity( 100 );
    document.getElementById("search-result").style.display="block";
    fadeOut();
    setTimeout(close_box, 400);
}
function setOpacity( value ) {
 document.getElementById("search-result").style.opacity = value / 10;
 document.getElementById("search-result").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function fadeIn() {
 for( var i = 10 ; i <= 100 ; i++ )
   setTimeout( 'setOpacity(' + (i / 5) + ')' , 5 * i );
}
function fadeOut() {
 for( var i = 10 ; i <= 100 ; i++ ) 
   setTimeout( 'setOpacity(' + (6 - i / 6) + ')' , 6 * i );
}

JavaScript即时搜索Div隐藏着褪色效果

1 个答案: