Keyup 功能只对输入的第一个字母起作用一次

问题描述

我有一个文本输入，用户可以在其中输入所需的页面名称

<input type='text' id='pageName'  name='PageName' class='form-control pageName'>

我正在尝试使用 keyup 函数来触发 Ajax 以检查页面是否存在，但是在键入 index 之类的内容时，Ajax 仅发送 I（第一个字母）并且不再运行。

脚本：

<script>
  $("#pageName").keyup(function() {
    $.ajax({
      type: "GET",async: false,url: "CheckPageName.PHP",data: {
        'PageName': jQuery(this).val()
      },cache: false,success: function(html) {
        $("#NotAllowed").replaceWith(html);
        $('#loader_image').hide();
      }
    });
  });
</script>

如果我添加 console.log(html); 它在日志中正确显示值，但 $("#NotAllowed").replaceWith(data); 只显示第一个字母或 2（如果我输入快！）

我错过了什么？

解决方法

该问题与您的 AJAX 调用无关（尽管 async:false 通常仍然是不必要的和不好的做法）。

问题在于 jQuery replaceWith 函数的作用。根据文档，它删除它匹配的元素，并用您提供给函数的内容替换整个元素。注意它替换了整个元素，而不仅仅是它的内部内容！

所以它只工作一次的原因仅仅是因为在第一次执行后，“NotAllowed”元素不再存在——replaceWith 已经删除了它并用你的 AJAX 请求的响应替换了它！

如果你想更新一个元素的内容而不删除它，在jQuery中你可以使用.html()或.text()（取决于内容是HTML还是纯文本）。在这种情况下，.text() 就可以了：

success: function(response) {
    $("#NotAllowed").text(response);
    $('#loader_image').hide();
}

演示：https://jsfiddle.net/k3461n7h/2/

,

您应该将 keyup 函数包装在 debounce 中。这将节省您从服务器请求数据时的一些时间和负载。

const debounce = (callback,wait) => {
  let timeoutId = null;
  return (...args) => {
    const [ { target } ] = args;
    window.clearTimeout(timeoutId);
    timeoutId = window.setTimeout(() => {
      callback.apply(target,args);
    },wait);
  };
}

const handleKeyUp = debounce(function() {
  $('#loader-image').show();
  $.ajax({
    type: 'GET',async: false,url: 'CheckPageName.php',data: { 'PageName': $(this).val() },cache: false,success: function(data,textStatus,jqXHR) {
      $('#not-allowed').html(data);
      $('#loader-image').hide();
    },error: function(jqXHR,errorThrown) {
      $('#not-allowed').html('<p>Not found...</p>');
      // Hide the mask after 1 second,to mimic waiting for a response
      // Remove this timeout once the response is hooked-up
      setTimeout(function() {
        $('#loader-image').hide();
      },1000);
    }
  });
},250); // Search only after 250ms once typing has stopped

$('#loader-image').hide();
$('#page-name').on('keyup',handleKeyUp);

#loader-image {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 999;
  background: rgba(0,0.5);
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="container">
  <form>
    <div class="mb-3">
      <label for="page-name" class="form-label">Search existing page name</label>
      <input type="text" id="page-name" name="page-name" class="form-control">
      <div id="page-name-help" class="form-text">Check for an existing page.</div>
    </div>
  </form>
  <hr />
  <div id="not-allowed"></div>
</div>
<div id="loader-image">Loading...</div>