jquery autocomplete - mouse below text box a causes selection after menu is shown

Question

I have a jquery autocomplete text box at the top of a page. Typically, a user will click in the text box to give it focus, move the mouse away, and then start typing. If the user moves the mouse below the autocomplete, their mouse location can inadvertently select a suggestion, even though they didn't do anything. When this happens and the user hits the enter key, the autocomplete uses their inadvertent selection.

This is a major problem due to the location of my autocomplete... it happens all the time, and is extremely frustrating to my users. I need a solution, but I can't seem to get the autocomplete to give me the keypress event first.

Here's my example:

http://jsfiddle.net/uqTv9/2/

Answer 1

Simply you can use select event to prevent enter like this :

$('#query').autocomplete({
    source: [
        "A",
        "AAA",
        "AAAAA",
        "AAAAAAAAA",
        "AAAAAAAAA",
        "AAAAAAAAAAA",
        "AAAAAAAAAAAAAA",
        "AAAAAAAAAAAAAAAA",
        "AAAAAAAAAAAAAAAAAA",
        "AAAAAAAAAAAAAAAAAAAAA",
        "AAAAAAAAAAAAAAAAAAAAAAAA"
    ],
    select: function(e, ui) {
        if(e.which === 13 ) {  return false; }
    }
});

JSFIDDLE : http://jsfiddle.net/gurkavcu/xSKPz/1/