刷新 OnKeyUp 搜索过滤器的结果

Question

我有 onkeyup 搜索功能，它工作正常，没有任何问题。 我希望当我在文本框中写入并且有一部分结果我想在不重新加载整个页面的情况下继续更新。

我已经使用下面的代码在 xxx 秒后自动刷新，它是使用下面的刷新代码刷新 div 的一部分，但是在键更改时，不是自动的。我需要它在 xxx 秒后自动刷新。

如果办公时间仍然有效或关闭，则结果中有关闭和打开按钮。如果我使用 OnKeyUp 进行搜索，它向我显示 TRAVEL office 的结果是打开的，并且 5 秒后它的时间将完成，因为我需要保持刷新代码在时间结束时工作并刷新它。

这里需要帮助，如果有人可以调整它。

刷新代码：

$(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>

onkeyup的JS

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

这是一个典型的例子，如何通过将 jQuery 与 vanilla javascript 和元素上的 on..... 事件混合来迷惑自己。一次，你使用 jQuery，让我们发挥它的优势。

首先，整理你的东西，只使用jQuery，从元素中删除onKeyUp。

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

但是，您的主要问题是您在计时器中更新$('#pen')，这没关系，但是当您执行keyup 时，它会更新整个#suggestion，因此$('#pen') 将丢失。