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

问题

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/

回答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/

回答2:

The below is a hack and basically it negates the jQuery styling and selection. Implemented the search callback and added hack in there to remove jQuery styling and removed the hack when the mouse is moved.

DEMO

Note: I haven't got a chance to try for the enter key yet.

$('#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);
    }
});

回答3:

This thread is already closed but since I had a similar problem and the solution listed above didn't worked for me, I would like to share this solution.

It consists of focusing the first element after the results list is opened.

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

My problem was when you leave the mouse pointer under the textbox then start typing the search the autocomplete selects the item under the mouse pointer and not the first.

来源：https://stackoverflow.com/questions/9624773/jquery-autocomplete-mouse-below-text-box-a-causes-selection-after-menu-is-show

标签

jquery

jquery-ui

autocomplete

mouseover

enter