Результат в поле поиска разверните поле - CSS

Question

Я создал окно поиска в реальном времени, но когда пользователь вводит текст в поле, поле поиска увеличивается. Мне нужно создать похожий результат поиска в Facebook. Мой код ниже.

.clearfix { clear:both; }
.sp { clear:both; display:block; margin-bottom:30px; }
.sp a { font-weight:bold; color:#0099FF; }
label { margin-top:20px; margin-bottom:3px; font-weight:bold;}
.searchDiv {
    width:405px;
}
.resultDiv {
    display:none;
    float:right;
    width:302px;
    margin-top:160px;
    max-height:200px;
    overflow:auto;
    border:1px solid #0099FF;
    padding:5px;
    z-index:999;
    background-color:beige;
}
ul.search1 {
    margin:0;
    padding:0;
}
ul.search1 li.pret {
    list-style:none;
    clear:both;
    width:100%;
    padding:5px 0;
    border-bottom:1px solid #ccc;
}
ul.search1 li.pret:hover, ul.search1 li.pret:hover > a {
    background-color:#0099FF;
    color:#fff;
    cursor:pointer;
}

ul.search1 img {
    float:left;
    margin:0 5px;
    padding:3px;
    border:1px solid #ccc;
    border-radius:5px;
}
ul.search1 a {
    text-decoration:none;
    color:#666;
    display:inline-table;
}

И мой HTML:

<div class="header-search-input-item">
    <input type="text" name="search" id="search" autocomplete="off" placeholder="Keyword?" value=""/>
    <div class="resultDiv"></div>
    <div class="clearfix"></div>
</div>

Javascript:

$(document).ready(function() {
    $("#search").keyup(function() {
        var keywords = $(this).val();
        if(keywords != "") {
            $.ajax({
                url: "get_search_result.php",
                data: {keywords : keywords},
                type: "POST",
                success: function(resp) {
                    if(resp != "") {
                        $(".resultDiv").html(resp).show();  
                    } else {
                        $(".resultDiv").html("").hide();
                    }
                }
            });
        } else {
            $(".resultDiv").html("").hide();
        }
    });


    $(document).click(function() {
        $("#search").val("");
        $(".resultDiv").html("").hide();                   
    });
});

Что мне нужно. Когда пользователь вводит ключевое слово для поиска на веб-сайте, результат отображает ниже форму поиска и расширяет только результаты поиска, а не форму поиска. Где я не прав? Спасибо всем