Onclick Event Not Working, Onmouse Working Though - php

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>

Answer 1

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

Answer 2

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