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.

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


  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().


  3. Old post, but it seems to never get outdated! Thanks a lot, this gave me a terrible headache!

Leave a Comment

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s