Jquery UI Autocomplete — Focus event via keyboard clears input content

If mousing over your autocomplete results correctly updates the input box with the currently highlighted value, but doing so via keyboard doesn’t (leaves the input blank) no matter what you put in your focus function, you need to prevent the default behavior from triggering.

For whatever reason, the default behavior works for mouse hovers but not keyboard.

        $("#faq_search").autocomplete({
            source: "/faq/ajax/",
            focus: function( event, ui ) {
                event.preventDefault(); // without this: keyboard movements reset the input to ''
                $(this).val(ui.item.question);
            },
            select: function( event, ui ) {
                document.location.href = ui.item.url;
            },
            context: this
        })
Advertisements

9 thoughts on “Jquery UI Autocomplete — Focus event via keyboard clears input content

  1. Thank you so much it worked perfectly! Saved me many hours of frustration I am sure. I just wish there was a way for the text to have a value when selected with arrows and auto filling the field. I was having a bit of a hard time debugging it. If you have any other tips on making it work better that would be great. Thanks for the perfect solution anyways šŸ™‚

  2. Thanks. I’ve been trying different configurations but I didn’t think about the event.preventDefault().

    Thanks!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s