jQuery obtém valor de entrada após pressionar a tecla

Eu tenho a seguinte função:

$(document).ready(function() {
    $("#dSuggest").keypress(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

Por alguma razão, pela primeira vez que pressiono uma tecla, estou recebendo uma string vazia no log do console.

Isso ocorre porque os keypresseventos são disparados antes que o novo caractere seja adicionado ao valueelemento (portanto, o primeiro keypressevento é disparado antes que o primeiro caractere seja adicionado, enquanto ele valueainda está vazio). Você deve usar em keyupvez disso, que é disparado após o personagem ter sido adicionado.

Observe que, se seu elemento #dSuggestfor o mesmo, input:text[name=dSuggest]você poderá simplificar consideravelmente esse código (e se não for, ter um elemento com um nome igual ao idde outro elemento não é uma boa ideia).

$('#dSuggest').keypress(function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

Percebendo que este é um post bastante antigo, fornecerei uma resposta de qualquer maneira, pois estava lutando com o mesmo problema.

Você deve usar o "input"evento e se registrar com o .onmétodo Isso é rápido - sem o atraso keyupe resolve o último problema de pressionamento de tecla que você descreve.

$('#dSuggest').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

Demonstração aqui

Use em .keyupvez de pressionar a tecla.

Use também $(this).val()ou apenas this.valuepara acessar o valor de entrada atual.

DEMO aqui

Informações sobre os .keypressdocumentos do jQuery,

O evento de pressionamento de tecla é enviado a um elemento quando o navegador registra a entrada do teclado. Isso é semelhante ao evento keydown, exceto no caso de repetições de teclas. Se o usuário pressionar e segurar uma tecla, um evento de pressionamento de tecla será acionado uma vez, mas eventos de pressionamento de tecla separados serão acionados para cada caractere inserido. Além disso, as teclas modificadoras (como Shift) acionam eventos de pressionamento de tecla, mas não os eventos de pressionamento de tecla.

Você precisa interromper o encadeamento de execução para permitir que a entrada seja atualizada.

  $(document).ready(function(event) {
       $("#dSuggest").keypress(function() {
           //Interrupt the execution thread to allow input to update
               setTimeout(function() {
                   var dInput = $('input:text[name=dSuggest]').val();
                   console.log(dInput);
                   $(".dDimension:contains('" + dInput + "')").css("display","block");
               }, 0);
       });
  });

Isso ocorre porque o Keypressevento é disparado antes que o novo caractere seja adicionado. Use o evento 'keyup', que funcionará perfeitamente na sua situação.

$(document).ready(function() {
    $("#dSuggest").keyup(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

Quero acrescentar a isso, se você tem muitas caixas de texto e precisa fazer a mesma coisa no evento keyup, basta dar a elas uma classe css comum (por exemplo, commoncss) e aplicar o evento keyup dessa maneira.

$(document).ready(function() {
    $(".commoncss").keyup(function() {
        //your code
    });
});

isso reduzirá bastante o seu código, pois você não precisará aplicar o evento keyup por id para cada caixa de texto.

Eu estava procurando por um exemplo de ES6 (para que ele pudesse passar pelo meu ponteiro). Portanto, para outras pessoas que estão procurando o mesmo:

$('#dSuggest').keyup((e) => {
    console.log(e.currentTarget.value);
});

Eu também usaria keyup porque você obtém o valor atual que é preenchido.

Basta usar um tempo limite para fazer sua ligação; o tempo limite será chamado quando a pilha de eventos for concluída (ou seja, após a chamada do evento padrão)

$("body").on('keydown', 'input[type=tel]', function (e) {
    setTimeout(() => {
        formatPhone(e)
    }, 0)
});

Eu acho que o que você precisa é o protótipo abaixo

$(element).on('input',function(){code})

jQuery obtém valor de entrada após pressionar a tecla

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

i = 0;  
$(document).ready(function(){  
    $("input").keypress(function(){  
        $("span").text (i += 1);  
    });  
}); 

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery keyup() Method By Tutsmake Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Enter something: <input type="text">  
<p>Keypresses val count: <span>0</span></p>  
</body>  
</html>