I have a form that contains a text field and a button. When I start typing, it shows hints from my database and upon clicking the button or hitting the enter key it displays search results. AJAX is used for both hints and search results, and it is working well.
The problem is that it only works the first time after the page loads. If I want another search, it doesn't respond. It just shows the previous search results until the page is refreshed, but the showhint()
function works well.
<input type="text" id="txt" onkeyup="showhint(this.value)"/>
<input type="button" value="search" onclick="searchresult()"/>
The AJAX function:
function searchresult() {
var key = document.getElementById("txt").value;
var xmlhttp;
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("mid").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","keyprocess.php?q=" + key, true);
xmlhttp.send();
}
What is the problem?