在输入框上方显示搜索结果

Question

我有一个搜索框，显示输入框正下方的结果。我想让它在盒子上面显示结果并轻轻地滑出来。

<form id="searchform" action="#"><input type="search" id="srch" maxlength="450" value="" title="Resort livesearch"  name="q"  /></form>

JS

$("#srch").autocomplete({
    minLength: 3,
    source: function (a, b) {
        $.getJSON("http://skiweather.eu/v3/ajax/search.php?q=" + a.term + "&format=json", function (a) {
            b(a)
        })
    },
    select: function (a, b) {
        $("#srch").val(b.item.resort_name);
        return false
    },
    focus: function (a, b) {
        $("#srch").val(b.item.resort_name);
        return false
    }
}).data("ui-autocomplete")._renderItem = function (a, b) {
    return $("<li></li>")
        .data("item.autocomplete", b)
        .append('<a href="/webcams/' + b.resort_us + '"><span class="nat nat-' + b.sym + '"></span> ' + b.resort_name + ' <small>' + b.cnt + ' cams</small> </a> ')
        .appendTo(a)
}

$( ".ui-autocomplete,.ui-menu" ).on( "click", "li", function() {
    window.location=$(this).find("a").attr("href");
    return false;
});

CSS

.ui-autocomplete { position: absolute; cursor: default; }      
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }


.ui-menu {
        list-style:none;
        padding: 2px;
        margin: 0;
        display:block;
        background: rgba(255, 255, 255, 0.92);
        width:150px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        box-shadow:2px 6px 6px rgba(22,23,30,.4);
        z-index:200;
}
.ui-menu .ui-menu {
        margin-top: -3px;
}
.ui-menu .ui-menu-item {
        margin:0;
        padding: 0;
        width: 100%;
}
.ui-menu .ui-menu-item a {
        text-decoration:none;
        display:block;
        padding:.2em .4em;
        zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
        margin: -1px;
}

.ui-helper-hidden-accessible {display:none;}