css moving div below text results - css

Question

I am trying to move a div below auto complete search results. But i am unable to push the div below autocomplete results after user starts typing. I am trying to implement searchbox similar to www.microsoft.com. Any help would be highly appreciated.
Here is my Fiddle code
<input name="query" id="pageSearchField" type="text" maxlength="50" value="" class="ui-autocomplete-input" autocomplete="off">
var availableTags = [
"Details",
"Project ",
"Release ",
"Property ",
"Application",
"Last Modified By",
"Last Modified Date",
"Tagged by"
];
$("#pageSearchField").autocomplete({
source: availableTags
});
$("#pageSearchField").click(function () {
$('#bottom-div').show("slow");
});
$('#pageMainRegion').click(function () {
$('#bottom-div').hide("slow");
});
$('#bottom-div>div').css("background-color", "white");
var firstFilterText = "Search Data Centers";
var secondFilterText = "Search Projects";
var thirdFilterText = "Search Orders";
$("#pageSearchField").after("" +
"<div id=" + "bottom-div" + "><div>" + firstFilterText + "</div>" +
"<div>" + secondFilterText + "</div>" +
"<div>" + thirdFilterText + "</div></div>");
$('#bottom-div>div').click(function () {
$('#bottom-div>div').css("background-color", "white");
$('#bottom-div>div').css("color", "black");
$(this).css("background-color", "gray");
$(this).css("color", "white");
});
#bottom-div {
z-index: 999;
position: absolute;
min-width: 290px;
background: #fff;
padding: 10px;
border: 1px solid #ccc;
height: 80px;
cursor: pointer;
display: none;
border-top-color: #000;
}
#bottom-div > div {
padding-bottom: 5px;
}

Answer 1

Since Ui-Autocomplete has position:absolute, it will not affect page layout in the normal way and it will not push elements below it.
One approach is to extend the ui autocomplete to render with your div at the bottom of the autocomplete (jsFiddle)
$.widget( "custom.autocompletePlus", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var original = this._super(ul, items);
$(ul).append(
"<p>Your Html goes here</p>"
);
}
});
$("#pageSearchField").autocompletePlus({
source: availableTags,
});

Answer 2

change your jQuery like this:
$(".ui-autocomplete").after("" +
"<div id=" + "bottom-div" + "><div>" + firstFilterText + "</div>" +
"<div>" + secondFilterText + "</div>" +
"<div>" + thirdFilterText + "</div></div>");
remove position:absolute from your bottom-div and add this class to your CSS:
.ui-autocomplete{
position:relative;
top:0;
left:0;
}
DEMO
with some style you can create what you want.