Question

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

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

如果办公时间仍然有效或关闭，结果会有关闭和打开按钮。如果我用OnKeyUp搜索并且它向我显示TRAVEL办公室的结果是打开的，并且在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所以{{1将失去。

刷新OnKeyUp搜索过滤器的结果

1 个答案: