I have the onkeyup search function its working fine without any issue. I want that when I will write in a textbox and there is a part of result I want to keep updating without reloading full page.
I have used the below code for refresh automatically after xxx seconds, it is refreshing the part of div using the below code of refresh but on key change, not automatically. I need it to be refreshing automatically after xxx seconds.
In the result there is close and open button if office time is still valid or closed. if i searched with OnKeyUp and it showed me the result with TRAVEL office is open and after 5 seconds its timing will finish for that i need to keep that refresh code to work on that time when the time will finish and will refresh it.
help is needed in this, please if somebody can adjust it.
Code for refresh:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#pen').load('sample.php');
}, 1000); // the "3000"
});
HTML
<form class="well-home span6 form-horizontal">
<input type="text" id="book" onKeyUp="book_suggestion()">
</form>
<!-- Display Result of onkeyup Search -->
<div class="check" id="suggestion">
<!-- Refresh here -->
<div class="row check" id="pen">
</div>
</div>
JS of onkeyup
function book_suggestion() {
var book = document.getElementById("book").value;
var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data = "textboxSearch=" + book;
xhr.open("POST", "sample.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
xhr.onreadystatechange = display_data;
function display_data() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("suggestion").innerHTML = xhr.responseText;
document.getElementById("suggestion").load = xhr.responseText;
} else {
alert('There was a problem with the request.');
}
}
}
}