0

私は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>
4

2 に答える 2

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 に答える