Question

我用AJAX构建了一个即时搜索，就像当你开始输入结果时出现的那样，如果你点击身体上的任何地方结果消失，那么在输入字段上的结果会重新出现。当在输入字段内部点击结果消失时。

我希望在输入字段中单击onmouse事件后，此结果将保持打开状态。为此，我添加了一个点击事件，但它无法正常工作。

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

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

Answer 1

我很喜欢jQuery，我忘了在IE上有所不同。

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

if(e.stopPropagation && e.preventDefault) {
  e.stopPropagation();
  e.preventDefault();
} else {
  e.cancelBubble = true;
  e.returnValue = false;
}

Answer 2

试试这个？

<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" />

Onclick事件不起作用，Onmouse工作虽然

2 个答案: