Search jQuery

jQuery Forum

Developing jQuery UI

gilnoy11

Autocomplete Inside a Dialog 1.8rc2

Solved

Need more info
Not a problem
Temporary fix
Analyzing
Working on it
Solved

in Developing jQuery UI • 10 years ago

Im working with the autocomplete inside of a dialog. the autocomplete positioned in the middle\bottom of the dialog.
When i get the select menu results, the dialog gets a scroll because of the select menu height (to see the result i need to scroll the dialog), in a result i had to limit my result, and change the height property of the dialog.

I think that:
The select menu should go over the dialog tough its inside the dialog body div.
or
Add a scroll to the menu by calculating the extra space and position it on top or bottom.

Replies(2)

gilnoy11

Re: Autocomplete Inside a Dialog 1.8rc2

10 years ago

I changed my source file by appending the "ul" to the body and not to the parent element.
Still there is issue with zIndex, so i just gave it 1006 (higher then the dialog zIndex);

.appendTo("body")

this.menu = $( "<ul></ul>" )
            .addClass( "ui-autocomplete" )
            .appendTo("body")
            .menu({
                focus: function( event, ui ) {
                    var item = ui.item.data( "item.autocomplete" );
                    if ( false !== self._trigger( "focus", null, { item: item } ) ) {
                        // use value to match what will end up in the input
                        self.element.val( item.value );
                    }
                },
                selected: function( event, ui ) {
                    var item = ui.item.data( "item.autocomplete" );
                    if ( false !== self._trigger( "select", event, { item: item } ) ) {
                        self.element.val( item.value );
                    }
                    self.close( event );
                    self.previous = self.element.val();
                    // only trigger when focus was lost (click on menu)
                    if ( self.element[0] != document.activeElement ) {
                        self.element.focus();
                    }
                }
            })
            .zIndex(2000)