[autocomplete] - Enhancement using mouseleave

[brandonbk]

Suggested enhancement: Add mouseleave functionality to the autocompleter as follows:

list = $("<ul/>").appendTo(element).mouseleave( function(event) {

if (target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') {

active = $("li", list).removeClass(CLASSES.ACTIVE).index(target(event)); } })

This resolves an issue where a user mouses over the autocomplete list (without clicking), but then tries to use the Enter key on the input box. Currently, it incorrectly chooses the selected autocomplete item, even though it was not clicked. Excellent plug-in btw!

[vincedev]

The mousemove event would'nt be better? I suggest another thing, for me, there is two way to fill the textbox whith a selected item:

-- selection by mousemove AND mouseclick
-- selection by keyup/keydown AND keypress(RETURN/TAB)

But actually, by pressing RETURN key, the plugin fill the textbox with the highlighted item witch it highlighted by mouseover.

I patch the code in the switch/case on the key pressed by:

-- adding a variable "hasMovedUpOrDown" by default at false
-- setting this variable true when pressing on KEY.UP, KEY.DOWN, KEY.PAGEUP or KEY.PAGEDOWN
-- enabling the KEY.RETURN only when this variable is true, else, select.hide()

The code ( ![...] means unchanged code ):

$.Autocompleter = function(input, options) {
    [...]
    var hasMovedUpOrDown = false;
    [...]
    switch(event.keyCode) { 
        [...]
        case KEY.UP:
            event.preventDefault();
            if ( select.visible() ) {
                select.prev();
                hasMovedUpOrDown = true;
            } else {
                onChange(0, true);
            }
            break;

        case KEY.DOWN:
            event.preventDefault();
            if ( select.visible() ) {
                select.next();
                hasMovedUpOrDown = true;
            } else {
                onChange(0, true);
            }
            break;

        case KEY.PAGEUP:
            event.preventDefault();
            if ( select.visible() ) {
                select.pageUp();
                hasMovedUpOrDown = true;
            } else {
                onChange(0, true);
            }
            break;
                                
        case KEY.PAGEDOWN:
            event.preventDefault();
            if ( select.visible() ) {
                select.pageDown();
                hasMovedUpOrDown = true;
            } else {
                onChange(0, true);
            }
            break;
        [...]

        case KEY.RETURN:
            if (!hasMovedUpOrDown) {
                select.hide();
                break;
            }
            [...]
            break;

[...]

I'm sorry for my english, i'm just a poor french developper who really like this plugin...

[dmethvin]

This is not a jQuery core bug. Please report plugin bugs to the plugin's author, or ask on the jQuery forums. jQuery UI bugs should be reported on the UI bug tracker, ​http://dev.jqueryui.com .