具有淡入效果的JavaScript即时搜索Div隐藏_Javascript_Html_Ajax_Search

具有淡入效果的JavaScript即时搜索Div隐藏

javascript html ajax search

具有淡入效果的JavaScript即时搜索Div隐藏,javascript,html,ajax,search,Javascript,Html,Ajax,Search,我已经用javascript实现了一个即时搜索，我能够使它工作，除了在某一点我已经在我的即时搜索中实现了以下功能，并且工作正常结果出现在“搜索结果”部分单击文档结果消失器上的任意位置时当鼠标悬停或在输入字段中单击时，请重新应用结果添加了淡色效果，使结果在文档单击后重新出现这是1。实施效果不佳添加了文档单击后结果消失的淡入淡出效果。它是第一次在文档被单击时工作，结果消失，效果减弱，但在鼠标悬停或单击输入字段后，结果重新出现，然后单击文档结果不消失，并且没有效果这是我的Javascr

我已经用javascript实现了一个即时搜索，我能够使它工作，除了在某一点

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

结果出现在“搜索结果”部分

单击文档结果消失器上的任意位置时

当鼠标悬停或在输入字段中单击时，请重新应用结果

添加了淡色效果，使结果在文档单击后重新出现

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


函数显示结果（str）
{
如果（str.length==0）
{
document.getElementById（“搜索结果”）.innerHTML=“”；
document.getElementById（“搜索结果”）.style.border=“0px”；
返回；
}
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“搜索结果”）.innerHTML=xmlhttp.responseText；
document.getElementById（“搜索结果”）.style.border=“1px solid#A5ACB2”；
document.getElementById（“搜索结果”）.autocomplete=“关闭”；
document.getElementById（“搜索结果”）.style.display=“block”；
var=false；
document.onclick=函数（）{
关闭_框（）；
如果（！发射）{
document.getElementById（“搜索输入”）.onMouseCenter=function（）{
显示\u框\u fadeIn（）
删除此.onMouseCenter；}；
};
}
document.getElementById（“搜索输入”）.onmouseleave=function（）{
var=true；
如果（被解雇）{
document.getElementById（“搜索输入”）.onMouseCenter=function（）{
show_box（）}；
};
}
document.getElementById（“搜索输入”）.onclick=function（e）{
如果（！e）{
e=窗口事件；
}
如果（如停止播放和防止默认播放）{
e、 停止传播（）；
e、 预防默认值（）；
}否则{
e、 取消气泡=真；
e、 returnValue=false；
}show_box（）；返回true；
};
//////////文档ONCLICK之后的事件//////////
var=false；
var closeBox=false；
document.onclick=函数（）{
如果（！closeBox）{
关闭_盒_淡出（）；
}
如果（！发射）{
document.getElementById（“搜索输入”）.onMouseCenter=function（）{
显示\u框\u fadeIn（）
删除此.onMouseCenter；}；
};
}
document.getElementById（“搜索输入”）.onmouseleave=function（）
{
var=true；
如果（被解雇）{
document.getElementById（“搜索输入”）.onMouseCenter=function（）{show_box（）}；
};
}
}
}
open（“GET”，“instant search.php”关键字=“+str，true）；
xmlhttp.send（）；
} 
//////////功能//////////
函数show_box（）{
document.getElementById（“搜索结果”）.style.display=“block”；
}
函数show_box_fadeIn（）{
不透明度（0）；
document.getElementById（“搜索结果”）.style.display=“block”；
法代因（）
}
函数关闭_框（）{
document.getElementById（“搜索结果”）.style.display=“无”；
}
功能关闭\u盒\u淡出（）{
if（封闭盒）{
document.onclick=function（）{close_box（）；}
返回；
}
closeBox=true；
不透明度（100）；
document.getElementById（“搜索结果”）.style.display=“block”；
淡出（）；
设置超时（关闭_框，800）；
}
函数setOpacity（值）{
document.getElementById（“搜索结果”）.style.opacity=value/10；
document.getElementById（“搜索结果”）.style.filter='alpha（不透明度='+value*10+'）；
}
函数fadeIn（）{
对于（var i=0；我最终得到了它，希望这也能帮助其他人
    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 );
}

函数显示结果（str）
{
如果（str.length==0）
{
document.getElementById（“搜索结果”）.innerHTML=“”；
document.getElementById（“搜索结果”）.style.border=“0px”；
返回；
}
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“搜索结果”）.innerHTML=xmlhttp.responseText；
document.getElementById（“搜索结果”）.style.border=“1px solid#A5ACB2”；
document.getElementById（“搜索结果”）.autocomplete=“关闭”；
document.getElementById（“搜索结果”）.style.display=“block”；
var=false；
var closeBox=false；
document.onclick=函数（）
{
if（封闭盒）{
返回；
}else{close_box_fadeOut（）；closeBox=true；}
如果（！发射）
{
document.getElementById（“搜索输入”）.onMouseCenter=function（）{
show_box_fadeIn（）；删除此.onMouseCenter；}；
};
}
document.getElementById（“搜索输入”）.onmouseleave=function（）
{
var=true；
如果（被解雇）{
document.getElementById（“搜索输入”）.onMouseCenter=function（）{show_box（）}；
    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 );
}