刷新OnKeyUp搜索过滤器的结果

Question

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.');
      }
     }
    }
}

Answer 1

This is a typicall example, how to confuse yourself by mixing the jQuery with vanilla javascript and on..... event on an element. Once, you use jQuery, let use it's advantages.

First of all, organize your things, and use only jQuery, remove the onKeyUp from element.

//Setinterval
var timer = setInterval(function () {
    $('#pen').load('sample.php');
}, 1000);

$('#book').on('keyup', function() {

    $('#suggestion').load('sample.php', {action: 'onkeyup',  textboxSearch: $(this).val()}, function(response) {
        console.log('Response of sample: ' + response + ' if you need');
    });
});

But, your main problem is that you update $('#pen') in your timer, what is ok, but when you execute the keyup it is update the whole #suggestion so the $('#pen') will loss.