Onclick Event Not Working, Onmouse Working Though

Question

I have build an instant search with AJAX, It is like when you start typing result appears, then if you click anywhere on the body result disappear, onmouse over at input field result re appear. when clicked inside input field result disappers.

I want this result to stays open after onmouse event when clicked in input field. for that i have added a click event, but it is not working.

Please see the codes and suggest any possible way to do this.

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

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

I think The result is invisible because of the `setOpacity(0)` — Bhuvan Rikka, Aug 03 '12 at 08:03
Are you sure it ever arrives at document.getElementById("search-input").onmouseover = function() { show_box() }; Add an alert or console.log() or something to check. — Erwin Moller, Aug 03 '12 at 08:04
you need `e.stopPropagation()` and `e.preventDefault()` in your document.getElementById("search-input").onclick function — thinklinux, Aug 03 '12 at 08:08
@ thinklinux also can you tell me how to stop onmouse event again and again as it shows blinking when mouse over again. — , Aug 03 '12 at 08:20
@ thinklinux {e.stopPropagation() and e.preventDefault()} working in firefox not working in internet explorer — , Aug 03 '12 at 08:23
Read this: http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute — Erwin Moller, Aug 03 '12 at 08:55

score 0 · Answer 1 · answered Aug 03 '12 at 08:28

0

try this?

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

or to test if onclick works

<input name="keyword" type="text" size="50" id="search-input" onclick="alert('replace this with your function you want to call');"    autocomplete="off" />

answered Aug 03 '12 at 08:28

Francois

10,465
4
53
64

yes this is working but i got to do it in javascript as i have to do it for onclick and onkeyup this way which will result in two query, while in javascript i just have to show and hide the query result. – Aug 03 '12 at 08:33
i tried @thinklinux method it is working in all browser but not in Internet explorer. do you have any workaround for that. – Aug 03 '12 at 08:35

score 0 · Accepted Answer · answered Aug 03 '12 at 09:29

0

I'm so into jQuery that I forgot there is a difference on IE.

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

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

answered Aug 03 '12 at 09:29

thinklinux

1,287
9
13

It now worked perfectly. Thanks, also can you tell me how to stop on-mouse event occurring again so that it will not show blinking of fading effect on mouse-over again. – Aug 03 '12 at 09:41
I commented about that in your question above – thinklinux Aug 03 '12 at 09:42
that didnt help still blinking on onmouseenter or onmouseleave. – Aug 03 '12 at 09:55

Onclick Event Not Working, Onmouse Working Though

2 Answers2