Bug Tracker

Opened 10 years ago

Closed 10 years ago

#4414 closed enhancement (invalid)

[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!

Change History (2)

comment:1 Changed 10 years ago by 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...

comment:2 Changed 10 years ago by dmethvin

Resolution: invalid
Status: newclosed

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 .

Note: See TracTickets for help on using tickets.