Question

The following function should reveal a panel when the input has 3 or more characters inside it and is not equal to the placeholder.

$('#search').keydown(function(){
            $('#header .suggestion').removeClass('visible');
            var slength = $(this).val();
            if(slength.length > 2 && slength != $(this).attr('placeholder')){
                //activate AJAX script
                $('#header .results').addClass('visible');
            }
            else {
                $('#header .results').removeClass('visible');
            }

    });

Instead it doesn’t appear until 5 characters are displayed. Why.

Marvellous

Answer 1

The keydown and keypress events are called BEFORE the browser has processed the input. During these events, the developer can add a method to prevent the user from entering text.

So, when you’re listening to the keydown function, the $(this).val() does NOT return the “expected” value.

An image (the user has already focused on the input field):

{ } <-- Empty input field
    [X] <-- Use presses the X key
    **KEYDOWN**
    **KEYPRESS**
{X} <-- "x" appears in the text field
    **KEYUP**

To get the “expected” value of the input, you have to use the keyup event instead of keydown.