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

Question

我正在尝试修改实时搜索模块，但遇到了一些样式问题。

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

我需要设置它的样式，以便在输入时向上显示结果。

HTML

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

CSS

                        #livesearch, #livesearch * {
                            margin: 0;
                            padding: 0;
                            list-style: none;
                        }
                        #livesearch {
                            position: absolute;
                            width: 200px;
                            top: 0px;
                            background: #ffffff;
                            z-index: 100;
                            box-shadow: 0px 10px 30px rgba(0,0,0,.5);
                        }
                        #livesearch li {
                            border-top: 1px solid #eeeeee;
                        }
                        #livesearch a {
                            display: block;
                            clear: both;
                            overflow: hidden;
                            line-height: 20px;
                            padding: 10px;
                            text-decoration: none;
                        }
                        #livesearch a:hover, #livesearch li.active a {
                            background: #38B0E3;
                            color: #ffffff;
                        }
                        #livesearch img {
                            float: left;
                            width: 50px;
                            height: 50px;
                            margin-right: 10px;
                        }
                        #livesearch img[src=''] {
                            display: none;
                        }
                        .more {
                            text-align: center;
                        }
                        #livesearch a em {
                            display: block;
                            color: #888888;
                            font-style: normal;
                            font-weight: bold;
                        }
                        #livesearch a:hover em, #livesearch li.active a em {
                            color: white;
                        }
                        #livesearch strike {
                            color: #aaaaaa;
                        }
                        #livesearch a:hover strike {
                            color: lightblue;
                        }
                        #livesearch small {
                            display: block;
                        }

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(); });
                        });

Answer 1

我只是加了

bottom: 100%;

到列表中，它运行完美:)