如何在javaScript中使用onkeyup函数来获取使用ajax和spring的值答案

【问题标题】：how to use a onkeyup function in javaScript to get the value using ajax with spring如何在javaScript中使用onkeyup函数来获取使用ajax和spring的值
【发布时间】：2017-07-06 07:06:12
【问题描述】：

如何使用带超时选项的 on key up 事件。键入的值应返回与数据库中匹配的数据
这是我的 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]"/>

【问题讨论】：

标签： javascript jquery spring html

【解决方案1】：

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

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

var timer;

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

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

【讨论】：

感谢您的回答。这里什么是计时器。该变量包含什么？
@Amya 变量由timer = setTimeout(searchUserId,300); 设置。通过将setTimeout() 分配给变量，我们可以使用clearTimeout() 重置它。

【解决方案2】：

你可以这样做
HTML

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

Jauery

$('#userId').on('keyup',function () {
    var userId = $(thi).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);
        }
    });
});

【讨论】：

工作得很好，谢谢你的代码。我只是误解了代码对不起！
@Amya 没关系，不客气，如果您的问题得到解决，然后通过接受我的回答来结束您的问题 :)