javascript - 如何在javaScript中使用onkeyup函数来使用ajax和spring来获取值

Question

如何使用带有超时选项的按键事件。输入的值应返回与数据库中匹配的数据
这是我的 Jquery 代码

function searchUserId() {
  var userId = $('#userId').val();
  //var moduleID = $('#moduleIdList').val();

  $.ajax({
    url: "controlpanel/SearchUserData",
    type: "POST",
    data: "userId=" + userId,
      //+ "&roleName=" + roleName,
      //For Progress Bar                                    
    success: function(response) {
      alert(userId);
      $('#page-wrapper').html(response);
    }
  });
}

<input type="text" tabindex="1" class="form-control" name="userId" id="userId" maxlength="20" 
   onkeyup="searchUserId();"data-validation-engine="validate[required]"/>

Answer 1

通过“超时选项”，我假设您的意思是使用它仅在用户完成输入时触发该函数。

首先，您应该从 HTML 中删除 onkeyup 属性。
然后将以下内容添加到您的 JS 中:

var timer;

$('#userId').on('keyup', function() {
  if (timer) clearTimeout(timer);
  timer = setTimeout(searchUserId,300);
});

如果在 300 毫秒内触发另一个 keyup 事件，这将重置计时器，因此当用户仍在打字时该函数不会被触发。当然，您可以将其设置为您喜欢的任何值。