Jquery autocomplete - mouse under text box a brings up selection after displaying menu

Question

I have a jquery autocomplete text box at the top of the page. Typically, the user clicks into the text box to give it focus, push the mouse away, and start typing. If the user moves the mouse below autocomplete, their mouse location may inadvertently select an offer, although they did nothing. When this happens and the user presses the enter key, autocomplete uses their inadvertent selection.

This is a serious problem with the location of my autocomplete ... it happens all the time and is extremely frustrating for my users. I need a solution, but I cannot get autocomplete to give me the first keystroke.

Here is my example:

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

Answer 1

You can simply use the select event to prevent input as follows:

$('#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/

Answer 2

Below is a hack and basically it negates jQuery style and selection. Implemented a search callback and added a hack to remove the jQuery style and remove the hack when moving the mouse.

Demo

Note. I still do not have the opportunity to try again to enter the key.

 $('#query').autocomplete({ source: [ "A", "AAA", "AAAAA", "AAAAAAAAA", "AAAAAAAAA", "AAAAAAAAAAA", "AAAAAAAAAAAAAA", "AAAAAAAAAAAAAAAA", "AAAAAAAAAAAAAAAAAA", "AAAAAAAAAAAAAAAAAAAAA", "AAAAAAAAAAAAAAAAAAAAAAAA" ], search: function(event, ui) { $(document).on('mouseenter', '.ui-menu-item a', function(e) { //Remove jQuery styling and selection. $(this).removeClass('ui-state-hover'); this.id = ''; e.preventDefault(); }).one('mousemove', '.ui-menu-item a', function(e) { //implement mouse move once if moved inside the same li>a $(this).addClass('ui-state-hover'); this.id = 'ui-active-menuitem'; //unbind the mouse event so it works as normal $(document).on('mouseenter', '.ui-autocomplete', function(e) { $(document).off('mouseenter', '.ui-menu-item a'); }); }); } }); $('#query').keypress(function(ev) { if (ev.keyCode == 13) { alert('query: ' + $(this).val()); return (false); } }); 

Answer 3

This thread is already closed, but since I had a similar problem and the above solution did not work for me, I would like to share this solution.

It consists of focusing the first element after opening the list of results.

 $('.selector').autocomplete({ open: function () { var w = $(this).autocomplete('widget'); setTimeout(function () { $('li:first', w).mouseover(); }, 50); } }); 

My problem was when you leave the mouse cursor in the text box and start typing, autocomplete selects the item under the mouse pointer, not the first.