css在文本结果下方移动div

我正在尝试移动自动完成搜索结果下方的div。但在用户开始键入后，我无法将div推到自动完成结果下面。我正在尝试实现类似于www.microsoft.com的searchbox。任何帮助都将不胜感激

这是我的

var availableTags=[
“详情”，
“项目”，
“释放”，
“财产”，
“应用程序”，
“上次修改人”，
“上次修改日期”，
“标记人”
];
$（“#页面搜索字段”）.autocomplete({
资料来源：availableTags
});
$（“#pageSearchField”）。单击（函数（）{
$（'底部div'）。显示（“慢”）；
});
$（'#pageMainRegion'）。单击（函数（）{
$（'底部div'）。隐藏（“慢速”）；
});
$（'#bottom div>div'）.css（“背景色”、“白色”）；
var firstFilterText=“搜索数据中心”；
var secondFilterText=“搜索项目”；
var thirdFilterText=“搜索订单”；
$（“#pageSearchField”）。在（“）+
“”+firstFilterText+“”+
“”+secondFilterText+“”+
“+thirdFilterText+”）；
$（'#底部div>div'）。单击（函数（）{
$（'#bottom div>div'）.css（“背景色”、“白色”）；
$（'#bottomdiv>div'）.css（“颜色”、“黑色”）；
$（this.css（“背景色”、“灰色”）；
$（this.css（“颜色”、“白色”）；
});
#下潜{
z指数：999；
位置：绝对位置；
最小宽度：290px；
背景：#fff；
填充：10px；
边框：1px实心#ccc；
高度：80px；
光标：指针；
显示：无；
边框顶部颜色：#000；
}
#底部div>div{
垫底：5px；
}

由于Ui Autocomplete具有position:absolute，它不会以正常方式影响页面布局，也不会将元素推送到页面下方

一种方法是使用div进行渲染

$.widget（“custom.autocompletePlus”，$.ui.autocomplete{
_renderMenu：功能（ul，项目）{
var original=此项。_super（ul，项目）；
$（ul）。附加(
“您的Html放在这里
”
);
}
});
$（“#pageSearchField”）.autocompletePlus({
资料来源：availableTags，
});

如下更改jQuery：

$(".ui-autocomplete").after("" +
        "<div  id=" + "bottom-div" + "><div>" + firstFilterText + "</div>" +
        "<div>" + secondFilterText + "</div>" +
        "<div>" + thirdFilterText + "</div></div>");

---

有了某种风格，你就可以随心所欲了。

更新了小提琴，在普通元素和添加的元素之间添加了一条线。这看起来是个不错的解决方案，但不知怎么的，它在我的机器上不起作用。我试图验证是否有一些依赖破坏了我的工作。请给我一些时间来标记答案。@Usham看看新的解决方案。他的解决方案看起来不错，但不知怎么的，它在我的机器上不起作用。我试图验证是否有一些依赖破坏了我的工作。请给我一些时间标出答案。当我在搜索框内单击时，我的底部div正在向下移动。我在开发者工具搜索数据中心搜索项目搜索订单中看到了这段代码。我们可以从代码中删除style=“display:block；”吗？我想这是把我的div移到了页面的下方。它的代码与上面的小提琴100%相同。让我追查一下这个问题。我认为这是一些依赖性问题。

 $.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,
    });

$(".ui-autocomplete").after("" +
        "<div  id=" + "bottom-div" + "><div>" + firstFilterText + "</div>" +
        "<div>" + secondFilterText + "</div>" +
        "<div>" + thirdFilterText + "</div></div>");

.ui-autocomplete{
    position:relative;
    top:0;
    left:0;
}