实时搜索-Ajax，PHP

Question

I have a little problem with the live search form. Below is what I want:

This is what I want. What I have is:

And Screenshot of my problem.

The general problem of Screenshot 3 when I type something in Keyword? field, when I get the result that the field gets bigger and that is what I don't need. The result field is good, exactly what I need. So problem is, I don't need to get a bigger field Keyword? after some user enters some text into that field. Keyword? field the same size, result div size wider.

Bellow, I will paste my code. 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();                   
    });
});

And PHP File:

<?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>";
}
?>