Opened 11 years ago

Closed 11 years ago

#8548 closed feature (wontfix)

Need more options looping/iterating behavior of autocomplete

Reported by: kncode Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.autocomplete Version: 1.8.23
Keywords: Cc:
Blocked by: Blocking:

Description

A customer asked me if I could stop the autocomplete list from looping when using the arrow keys. I think the widget should have two options in the options record:

1- doLoop: if false, when the user reaches the end of the list and pushes the down arrow, nothing happens (same at the top and the user pushes the up arrow).

2- skipInput: if true, when the user reaches the top or bottom of the list, and pushes the up or down arrow (respectively), the selected item should be the opposite end of the list, as opposed to the default behavior of highlighting the input field.

The default values of these two options should be true for the first and false for the second, so as to keep the widget behaving the way it always has for current users.

I already have it coded and will submit the change to git hub.

Change History (2)

comment:1 Changed 11 years ago by kncode

I suggest the following change:

New options:

        doLoop: true,
        skipInput: false

Change the _move function as follows:

    _move: function( direction, event ) {
        if ( !this.menu.element.is(":visible") ) {
            this.search( null, event );
            return;
        }

        if ( this.menu.first() && /^previous/.test(direction) ||
                this.menu.last() && /^next/.test(direction) ) {
            if (this.options.doLoop) {
                if (this.options.skipInput) {
                    if (this.menu.first() && /^previous/.test(direction) ) {
                        this.menu.activate(event, this.menu.element.children(".ui-menu-item:last"));
                        return;
                        }
                    else if (this.menu.last() && /^next/.test(direction) ) {
                        this.menu.activate(event, this.menu.element.children(".ui-menu-item:first"));
                        return;           
                        }       
                }
                else {
                    this.element.val( this.term );
                    this.menu.deactivate();
                    return;               
                }
            }
            else
                return;
        }

        this.menu[ direction ]( event );
    },

Last edited 11 years ago by kncode (previous) (diff)

comment:2 Changed 11 years ago by Scott González

Resolution: wontfix
Status: newclosed

It seems bad to add two options to break common behaviors. Feel free to build these as extensions.

Note: See TracTickets for help on using tickets.