Ajax异步获取和按键功能答案

【问题标题】：Ajax async get and key press functionAjax异步获取和按键功能
【发布时间】：2023-03-07 13:05:01
【问题描述】：

我需要根据表单文本输入字段上的信息输入来填充选择列表。我弄清楚了 Ajax 部分，但它没有按预期工作。这个想法是当用户在名字字段中输入时，选择列表将填充适当的选项。该函数确实有效，但 var firstname = $("#fn").val(); call 将始终返回比字段中键入的内容少一个字符。任何帮助将不胜感激！

下面是相关的html和代码：

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fn").keypress(function() {
    var firstname = $("#fn").val();
    $.get("CustomerList", {FirstName: firstname}, function(responseText) {
    $("#div1").text(responseText);
    });
});
    });
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Show all names</title>
</head>

<body>
    <form method="GET" action='Controller' name="CreateNTF"   >
    <table>
        <tr>
            <td>Create User:</td>
            <td><input id="fn" type="text" name="FirstName" /></td>
            <td><input id="ln" type="text" name="LastName"/></td>
        </tr>  
        <tr>
            <td>Carrier</td>
            <td>
            <span id="div1"></span>
            </td>
        </tr>
    </table>
    <input type="submit" name="submit" value="Submit" onClick="return validateForm();"/>
    </form>
</body>

</html>

【问题讨论】：

标签： jquery ajax keyboard-events

【解决方案1】：

尝试使用keyup 而不是keypress。也许keypress 触发得太早，无法让.val() 识别文本更改。

另一种解决方案是自己计算最终的字符串：

$("#fn").keypress(function(e)
{
    var firstname = $("#fn").val() + String.fromCharCode(e.which);
    $.get("CustomerList", {FirstName: firstname}, function(responseText) {
    $("#div1").text(responseText);
    });
});

不过最后this guy好像和你有同样的问题，建议的解决方法也一样。

【讨论】：

在评估 .val() 之前，我已经尝试了所有方法，甚至使用了 setTimeout("",1000)。
刚刚为我的答案添加了另一个解决方案。
毕竟，keyup 事件确实有效，我不知道为什么它在第一次没有工作。感谢他重播

【解决方案2】：

使用 keyup 和 keypress，您将触发每个字符的 AJAX 调用。我认为您可能想要使用 change 事件，该事件将在输入框失去焦点时触发 ajax 调用，这是在用户完成输入并从输入框出来之后。这样，您将拥有完整的输入字符串并避免不必要的 ajax 调用。

【讨论】：

感谢您的回复。我知道我可以使用更改事件，但是有一个特定的要求来跟踪用户的按键输入。因此我不能使用更改事件。