Bug Tracker

#4414 closed enhancement (invalid)

Opened March 25, 2009 12:31AM UTC

Closed October 13, 2009 12:00AM UTC

[autocomplete] - Enhancement using mouseleave

Reported by: brandonbk Owned by:
Priority: minor Milestone: 1.4
Component: plugin Version: 1.3.2
Keywords: autocomplete, mouseleave, mouseout Cc:
Blocked by: Blocking:
Description

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!

Attachments (0)
Change History (2)

Changed July 07, 2009 02:52PM UTC by vincedev comment:1

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 ):

#!js
$.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...

Changed October 13, 2009 12:00AM UTC by dmethvin comment:2

resolution: → invalid
status: new → closed

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 .