JavaScript即时搜索潜水隐藏与褪色效果

我已经用javascript实现了一个即时搜索，除了一点之外，我能够让它工作。

我已经在我的即时搜索中实现了以下内容，并且运行良好。

1. 结果出现在"搜索结果"div中
2. 当单击文档上的任何位置时，结果将失效
3. 当鼠标悬停在输入字段结果重新应用程序上或单击时
4. 添加了渐变效果，可在文档单击后重新显示结果

这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>

请提出任何可能的方法来做到这一点，我希望有人能帮助我。

谢谢。