Живой поиск - Ajax, PHP

Question

У меня небольшая проблема с формой поиска в реальном времени. Вот то, что я хочу:

Это то, что я хочу. Что у меня есть:

И скриншот моей проблемы.

Общая проблема Снимок экрана 3 , когда я набираю что-то в поле Ключевое слово? , когда я получаю результат, что поле становится больше , и это то, что я не делаю Т нужно . Поле результата хорошее, именно то, что мне нужно. Итак, проблема в том, что Мне не нужно получать большее поле Ключевое слово? после того, как какой-то пользователь введет в это поле какой-то текст. Ключевое слово? поле того же размера , результат div размер шире.

Ниже, я вставлю свой код. HTML:

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

CSS:

.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:130px;
}
.resultDiv {
    display:none;
    width:auto;
    margin-top:40px;
    max-height:200px;
    overflow:auto;
    border:1px solid #0099FF;
    padding:5px;
    z-index:999;
    background-color:#fff;
}
.search {
    width: 100%;
    float: left;
    margin:0;
    padding:0;
}
.search .pret {
    list-style:none;
    clear:both;
    width:100%;
    height: 60px;
    padding:5px 0;
    border-bottom: 1px solid #fff;
}
.search .pret:hover, .search .pret:hover > a {
    background-color:#0099FF;
    color:#fff;
    cursor:pointer;
}

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

JS:

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

И PHP Файл:

<?php include("db.php");?>
<?php
if(isset($_POST['keywords'])) {
    $keywords_arr = explode(",", mysqli_real_escape_string($con, $_POST['keywords']));
    $like = "";
    foreach($keywords_arr as $key) {
        $key = trim($key);
        if($key != "") $like .= " `VehiclesTitle` like '%".$key."%' or";
    }
    $like = substr($like, 0, -3);

    $sql = "select distinct * from `tblvehicles` where ".$like." limit 20";
    $res = mysqli_query($con, $sql);
    echo "<ul class='search'>";
    if(mysqli_num_rows($res) > 0) {

        while($row = mysqli_fetch_object($res)) {
            if(file_exists("admin/img/vehicleimages/".$row->Vimage1."")) $img = "admin/img/vehicleimages/".$row->Vimage1."";
            else $img = "images/post_images/default.jpg";
            echo "<li class='pret'><a href=''><img src='".$img."' width='50' height='50' />".$row->VehiclesTitle."</a></li>";
        }

    } else {
        echo "<li class='pret'>No match found!</li>";
    }
    echo "</ul>";
    echo "<div class='clearfix'></div>";
}
?>