0

我已经用 AJAX 构建了一个即时搜索，就像当你开始输入结果时出现，然后如果你点击正文上的任何地方结果消失，鼠标悬停在输入字段结果重新出现。在输入字段内单击时，结果消失。

在输入字段中单击鼠标事件后，我希望此结果保持打开状态。为此，我添加了一个点击事件，但它不起作用。

请查看代码并建议任何可能的方法来做到这一点。

<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").style.display = "block";
                document.getElementById("search-input").onmouseover = function() {
                    show_box()
                };
                document.getElementById("search-input").onclick = function() {
                    show_box()
                };
            }
        }
        xmlhttp.open("GET", "instant-search.php?keyword=" + str, true);
        xmlhttp.send();
    }

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

    }

    function show_box() {
        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)"    autocomplete="off" />
<div id="search-result"></div>
4

2 回答 2

0

试试这个？

<input name="keyword" type="text" size="50" id="search-input" onclick="showResult(this.value)" autocomplete="off" />

或测试 onclick 是否有效

<input name="keyword" type="text" size="50" id="search-input" onclick="alert('replace this with your function you want to call');"    autocomplete="off" />
于 2012-08-03T08:28:38.333 回答
0

我非常喜欢 jQuery，以至于我忘记了 IE 是有区别的。

if(!e) {
  e = window.event;
}

if(e.stopPropagation && e.preventDefault) {
  e.stopPropagation();
  e.preventDefault();
} else {
  e.cancelBubble = true;
  e.returnValue = false;
}
于 2012-08-03T09:29:43.303 回答