CODEWITHSUNDEEP
jqueryjquery-uiautocomplete
Sadikhasan
Sadikhasan

Reputation: 18600

How to Forcefully open autocomplete up side in jQuery UI

In my project autocomplete dropdown has fixed position at bottom side.

HTML

<div class="ui-widget">
    <input id="tags"/>
</div>

jQuery

var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags" ).autocomplete({
   source: availableTags
});

I want to open forcefully up side and also when I scroll page then autocomplete dropdown must with text box do not scroll It fixed.

When I write in textbox it display with cutting dropdown as shown in image. enter image description here

Demo

Upvotes: 0

Views: 1856

Answers (1)

acontell
acontell

Reputation: 6922

Is this what you wanted? Fiddle

$( "#tags" ).autocomplete({
source: availableTags,
    open: function (event, ui) {// Code to open it at top left of the input.
    var $input = $(event.target);
    var $results = $input.autocomplete("widget");
    var scrollTop = $(window).scrollTop();
    var top = $results.position().top; 
    var height = $results.outerHeight();
    if (top + height > $(window).innerHeight() + scrollTop) {
        newTop = top - height - $input.outerHeight();
        if (newTop > scrollTop)
            $results.css("top", newTop + "px");
    }
}
});


$(window).scroll(function (event) {// Change position in the scroll event
     $('.ui-autocomplete.ui-menu').position({
            my: 'left bottom',
            at: 'left top',
            of: '#tags'
        });
 });

In the open event, I change the position of the autocomplete to the top of the input.

In the scroll event, I change the position once again to the top of the input.

I think that's the desired behaviour. Hope it helps.

Upvotes: 1

Related Questions