CODEWITHSUNDEEP
jqueryjquery-uiautocomplete
Xavier C.
Xavier C.

Reputation: 1817

How to get autocomplete result in another autoscaled div?

I want to get the autocomplete results in another autoscaled (height) div.

Here is my code :

var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++"
    ];
    $( "#search" ).autocomplete({
        source: availableTags,
        open: function(event, ui) {
          $('ul.ui-autocomplete').removeAttr('style').hide().appendTo('.searchSuggest').show();
        }
    });

<div class="searchSuggest"></div>
<div class="anotherDiv"></div>

All is ok except the searchSuggest div that is not scaled (height), so my results appear on the next div. I want to know how to autoscale my searchSuggest div.

Any idea ?

Thanks !

Upvotes: 1

Views: 1358

Answers (1)

Didier Ghys
Didier Ghys

Reputation: 30666

Do you use the jQuery UI CSS framework ?

There are IMO two things that prevents the container searchSuggest from growing with the result list (a .ui-menu widget actually)

  • the ul.ui-autocomplete has position: absolute, which means the element is out of the flow

  • it also has float: left, as well as the menu items

You can override those settings:

.searchSuggest .ui-autocomplete {
    position: relative;
    float: none;
}

.searchSuggest .ui-menu .ui-menu-item {
    float: none;
}

DEMO

Upvotes: 1

Related Questions