How to place autocomplete menu above the text input?

You'll want to add an open function to your autocomplete options. From there, you can adjust the results based off of its current position and height. This should get you close:

open: function(event, ui){
    var $input = $(event.target),
        $results = $input.autocomplete("widget"),
        top = $results.position().top,
        height = $results.height(),
        inputHeight = $input.height(),
        newTop = top - height - inputHeight;

    $results.css("top", newTop + "px");
}

This puts together Ibstr's solution and Cupidvogel's comment while adding window scroll position detection:

open: function (event, ui) {
    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");
    }
}

Note that I'm using outerHeight instead of height because I want to take into consideration the border thickness as well.

The autocomplete will orient itself to the top only if there is enough room for it to fully fit in above the input box.