jQuery AutoComplete : Make suggestions appear over the text box

Question

I'm using the Jquery autocomplete plugin found here : http://jqueryui.com/autocomplete/

It's working fine but the auto complete hints appears as a drop-down list whereas I want it to appear as drop-up ( Don't know if its the right word, but I want the hits to appear over the text box not below it).

Any way to achieve this?

Answer 1

The default position settings for JQuery UI autocomplete include:

 position: {
        my: "left top",
        at: "left bottom",
        collision: "none"
    },

You can probably provide the following to your call:

$('.whatever').autocomplete({
   position: {
       my: "left bottom",
       at: "left top",
   });

Answer 2

You can use the jQuery Ui autocomplete position option; the option allows you to set the position of the suggestions list using the jQuery UI position utility.

Quick reference:

Identifies the position of the suggestions menu in relation to the associated input element. The of option defaults to the input element, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.

Code:

$(function () {
    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,
        position: {
            my: "left bottom",
            at: "left top",
        }
    });

});

Worging demo: http://jsfiddle.net/IrvinDominin/KQdg8/

Docs: http://api.jqueryui.com/autocomplete/#option-position