Question

I need to be able to dynamically populate a html select base on input text value. This need to be automatically triggered once the text box value is 8 characters of more. User should not have to tab or click to see the populated value. Here’s what I have so far but this is only fire when the text box loses focus.

//Html code
<input id=InputText name=InputText onblur="populateListBox();" onchange="CheckInputLength();" onkeydown="CheckInputLength();" value="" onfocus="this.select();">

//Javascript code

function CheckInputLength()
{
    if($("#InputText").val().length >= 8)
        populateListBox();
}

function populateListBox()
{   
            $.get("???", function( data ) {
                $('#listBox').children().remove();
                var options = data;

                $("#listBox").append( options );
                $("#listBox").html( data );

            });

}

Answer 1

$('#InputText').keypress(function (event) {
    var $inputText = $(this);
    // Before keypress.
    setTimeout(function () {
        // After keypress.
        if ($inputText.val().length >= 8) { populateListBox(); }
    }, 0);
});