Функция асинхронного получения и нажатия клавиш Ajax

Мне нужно заполнить список выбора на основе ввода информации в поле ввода текста формы. Я разобрался с частью Ajax, но она не работает должным образом. Идея состоит в том, что когда пользователь вводит имя в поле имени, список выбора будет заполнять соответствующие параметры. Функция работает, но var firstname = $("#fn").val(); вызов всегда будет возвращать на один символ меньше, чем содержимое, введенное в поле. Любая помощь будет оценена!

Ниже приведен соответствующий 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
person user1988030    schedule 17.01.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте использовать 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);
    });
});

Но, наконец, этот парень похоже, та же проблема, что и у вас, и предложенное решение тоже было таким же.

person Thomas Kekeisen    schedule 17.01.2013
comment
Я уже пробовал все это и даже использовал setTimeout(,1000) перед оценкой .val(). - person user1988030; 17.01.2013
comment
Просто добавил еще одно решение к моему ответу. - person Thomas Kekeisen; 17.01.2013
comment
В конце концов, событие keyup действительно работает, я не знаю, почему оно не сработало в первый раз. Спасибо за повтор - person user1988030; 18.01.2013

arrow_upward
0
arrow_downward

с помощью keyup и keypress вы запускаете вызов AJAX с каждым символом. Я думаю, вы можете использовать событие изменения, которое вызовет вызов ajax, когда поле ввода теряет фокус, то есть после того, как пользователь заканчивает печатать и выходит из поля ввода. Таким образом, вы получите полную входную строку и избежите ненужных вызовов ajax.

person Ravi    schedule 17.01.2013
comment
Спасибо за ответ. Я знал, что могу использовать событие изменения, но есть особое требование для отслеживания нажатия клавиш пользователем. Поэтому я не могу использовать событие изменения. - person user1988030; 18.01.2013