#8548 closed feature (wontfix)

Opened September 04, 2012 02:34AM UTC

Closed September 04, 2012 03:14AM UTC

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.

Attachments (0)
Change History (2)

Changed September 04, 2012 03:04AM UTC by kncode comment:1

_comment0: I suggest the following change: \ \ New options: \ \ doLoop: true, \ skipInput: false \ \ Function: \ \ \ {{{ \ _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 ); \ }, \ \ }}} \ → 1346727907369020

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 );
    },

Changed September 04, 2012 03:14AM UTC by scottgonzalez comment:2

resolution: → wontfix
status: new → closed

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