JavaScript即时搜索Div隐藏，具有渐隐效果

Question

I have implemented an instant search with javascript, i am able to make it work except at one point.

I have Implemented following in my instant search and are working fine.

1. result comes in "search-result" div.
2. when clicking anywhere on document result disapper.
3. when hover over or clicking in input field result reapper.
4. added fading effect on result reappear after document click.

This 1. Implementation not working fine.

added fading effect on result disapper after document click. It is working for first time when document is clicked result disapper with fading effect but after mouse hover or clicking input field result re appear, then on clicking document result do not disapper and no effect.

These are my Javascript code.

<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 codes.

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

Please suggest any possible way to do this, I hope someone out there can help me.

Thanks.

Answer 1

Got it finally, Hope this help others too.

    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 );
}