Javascript 重新定位并向上显示实时结果

我正在尝试修改一个实时搜索模块，我有一些样式问题

当我键入关键字时，它向下显示结果。如果是左边或右边，我知道怎么做，但我不知道如何向上定位

我需要它的样式显示时，它的结果显示向上

HTML

<div id="footer">
<input type="text" name="filter_name2" >
<div class="button-search"></div>
</div>

Javascript

                        $(function(){
                            var i = (!!$("#livesearch").length ? $("#livesearch") : $("<ul id='livesearch'></ul>") ), s = $("#footer [name=filter_name2]");
                            function repositionLivesearch() { i.css({ top: (s.offset().top+s.outerHeight()), left:s.offset().left, width: s.outerWidth() }); }
                            $(window).resize(function(){ repositionLivesearch(); });
                            s.keyup(function(e){
                                switch (e.keyCode) {
                                    case 13:
                                        $(".active", i).length && (window.location = $(".active a", i).attr("href"));
                                        return false;
                                    break;
                                    case 40:
                                        ($(".active", i).length ? $(".active", i).removeClass("active").next().addClass("active") : $("li:first", i).addClass("active"))
                                        return false;
                                    break;
                                    case 38:
                                        ($(".active", i).length ? $(".active", i).removeClass("active").prev().addClass("active") : $("li:last", i).addClass("active"))
                                        return false;
                                    break;
                                    default:
                                        var query = s.val();
                                        //alert(query);
                                        if (query.length > 2) {
                                            $.getJSON(
                                                "<?php echo HTTP_SERVER; ?>?route=product/search/livesearch&filter_name=" + query,
                                                function(data) {
                                                    i.empty();
                                                    $.each(data, function( k, v ) { i.append("<li><a href='"+v.href+"'><img src='"+v.img+"' alt='"+v.name+"'><span>"+v.name+(v.model ? "<small>"+v.model+"</small>" : '')+"</span><em>"+(v.price ? v.price : '')+"</em></a></li>") });
                                                    i.remove(); $("body").prepend(i); repositionLivesearch();
                                                }
                                            );
                                        } else {
                                            i.empty();
                                        }
                                }
                            }).blur(function(){ setTimeout(function(){ i.hide() },500); }).focus(function(){ repositionLivesearch(); i.show(); });
                        });

$（函数（）{
变量i=（！！$（“#livesearch”）.length？$（“#livesearch”）：$（“
”），s=$（“#footer[name=filter#name2]”）；
函数respositionlivesearch（）{i.css（{top:（s.offset（）.top+s.outerHeight（）），左：s.offset（）.left，width:s.outerWidth（）}）；}
$（窗口）.resize（函数（）{respositionLiveSearch（）；}）；
s、 键控（功能（e）{
开关（如钥匙代码）{
案例13：
$（.active），i.length&（window.location=$（.active a，i.attr（“href”））；
返回false；
打破
案例40：
（$（“.active”，i）.length？$（“.active”，i）.removeClass（“active”）.next（）.addClass（“active”）：$（“li:first”，i）.addClass（“active”））
返回false；
打破
案例38：
（$（“.active”，i）.length？$（“.active”，i）.removeClass（“active”）.prev（）.addClass（“active”）：$（“li:last”，i）.addClass（“active”））
返回false；
打破
违约：
var query=s.val（）；
//警报（查询）；
如果（query.length>2）{
$.getJSON(
“？route=product/search/livesearch&filter_name=“+query，
功能（数据）{
i、 空（）；
$。每个（数据、函数（k，v）{i.append（“
”）}）；
i、 remove（）；$（“body”）.prepend（i）；respositionlivesearch（）；
}
);
}否则{
i、 空（）；
}
}
}).blur（function（）{setTimeout（function（）{i.hide（）}，500）；}）.focus（function（）{respositionlivesearch（）；i.show（）；}）；
});

我只是添加了

bottom: 100%;

---

添加到列表中，效果很好：）

A将很有帮助。@Fr0zenFyr我正在从opencart扩展自定义它，我不知道如何将它添加到JSFIDLE。但这是模块的演示链接。如果您使用位于右上角的搜索栏进行搜索，它将显示结果。@cameron我为buttonWell添加了html代码。。这个问题还没有明确说明。。。是否希望搜索结果如下所示：

bottom: 100%;