Question

我已经构建了一个即时搜索，其中结果显示在div中，当我将鼠标悬停在输入字段上时，我已经实现了fadIn效果，当在主体上单击时，我实现了fadeOut效果。我试图实现一种方法，当将鼠标悬停在输入字段上多次显示结果时，应该只在第一次出现淡入效果。

我的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";
            document.getElementById("search-input").onmouseover = function () {
                show_box_fadeIn()
            };
            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 close_box() {
    document.getElementById("search-result").style.display = "none";

}

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

function show_box_fadeIn() {
    setOpacity(0);
    document.getElementById("search-result").style.display = "block";
    fadeIn()
}
document.onclick = function () {
    close_box()
};

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 = 20; i <= 100; i++)
    setTimeout('setOpacity(' + (i / 5) + ')', 5 * i);
}

function fadeOut() {
    for (var i = 20; i <= 100; i++)
    setTimeout('setOpacity(' + (5 - i / 5) + ')', 5 * i);
}
</script>

我的Html代码

<input name="keyword" type="text" size="50" id="search-input" onkeydown="showResult(this.value)" />
<div id="search-result"></div>

我试过这种方式，但在鼠标悬停时仍然反复消失。

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

请参阅并建议任何可行的方法。

感谢。

Answer 1

document.onclick = function() {
    if(!fired)

使用此代码，您只能在鼠标点击时检查fired变量。我想你想要：

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

Answer 2

终于明白了，谢谢奥斯汀。

我的完整代码，希望这也有助于其他人。

    <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;
};
}
}
xmlhttp.open("GET","instant-search.php?keyword="+str,true);
xmlhttp.send();
}

function close_box(){
document.getElementById("search-result").style.display="none";

}
function show_box(){
document.getElementById("search-result").style.display="block";
}
function show_box_fadeIn(){
setOpacity( 0 );
document.getElementById("search-result").style.display="block";
fadeIn()
}
document.onclick = function(){close_box()};

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 = 20 ; i <= 100 ; i++ )
setTimeout( 'setOpacity(' + (i / 5) + ')' , 5 * i );
}
function fadeOut() {
for( var i = 20 ; i <= 100 ; i++ )
setTimeout( 'setOpacity(' + (5 - i / 5) + ')' , 5 * i );
}
</script>

一旦事件实现，Javascript就会触发

2 个答案: