AJAX: Arrow Up and Down is not working in suggested drop down list

Question

I have already created an auto-suggest box using AJAX and jQuery with PHP and postgreSQL with some help. I am still very new to AJAX and still learning the code as I go along. Luckily, the auto-suggest is working great, but I noticed that my up and down cursor keys for the keyboard are not working at all. Nothing happens when I arrow up or down in the suggested list. I am able to use the mouse to select in the suggested list, but cannot select things by use of keyboard arrows. What I want to do is change the keyup to keydown or add the keydown somewhere so this way it can go cross browser, and then move the selection in the required direction based on the keyCode. However I am still new to AJAX, and everytime I tried coding it, the suggested drop down list stops working or just crashes the page. I know it is in my ajax portion of the script. Shouldn't have anything much to do with the HTML or my php page. Any help getting the arrow keys to work along with the mouse is appreciated. Any code examples will be appreciated as well.

$(document).ready(function(){
    $("#search-box").keyup(function(){
        $.ajax({
            type: "POST",
            url: "autocomplete.php",
            data: 'keyword=' + $(this).val(),
            beforeSend: function() {
                $("#search-box").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165px");
            },
            success: function(data){
                $("#suggesstion-box").show();
                $("#suggesstion-box").html(data);
                $("#search-box").css("background", "#FFF");
            }
        });
    });
});

function selectCountry(val) {
    $("#search-id").val(val);
    $("#suggesstion-box").hide();
}

function updateSearchBox(el) {
    $("#search-box").val($(el).html());   
}

Here is the HTML code for the search input in the form:

<div style="background-color:#ffffff; width:100%; float:left;  padding-bottom:25px; clear:both;  ">
    <div class="frmSearch " style="width:90%; float:left;"   >
        <label>                                             
            <input maxlength="75" type="search" name="jurisdiction_search"  class="search_keyword" id="search-box" placeholder="Enter County, City, or Client Name"  />
            <input type="hidden" name="search" id="search-id"  />
            <div class="box" id="suggesstion-box"></div>
        </label>                                                
    </div>
    <div style="width:10%; float:left; clear:right;">
        <label>                                         
            <input style="width:100%; height: 50px; " type="submit"  value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
        </label>
    </div>
</div>

Here is some of the code in the autocomplete.php

<?php
if (!$result){
    echo "<div class='show' align='left'>No matching records.</div>";
}else {
?>
    <ul id="country-list" >
        <?php
        while($row=pg_fetch_assoc($result)){
        ?>                                      
            <li  onClick="selectCountry('<?php echo $row["id"]; ?>'); updateSearchBox(this);"> <?php echo "(".$row["id"].") ".$row["company"].", ".$row["st"]; ?> </li>
        <?php } ?>
    </ul>
<?php
}
?>

Here is my last failed attempt at working with ajax to get the arrow keys to work. Like I mention above, the suggested box stop working on this attempt.

<script>
$(document).ready(function(){
    $(document).on("keydown", function(e) {
        if (e.keyCode == 40) {
             if(chosen === "") {
                 chosen = 0;
             } else if((chosen+1) < $('#search-box').length) {
                chosen++;
             }
              $('#search-box').removeClass('selectedhash');
              $('#search-box:eq('+chosen+')').addClass('selectedhash');

               return false;
        }
        if (e.keyCode == 38) {
            if(chosen === "") {
                chosen = 0;
            } else if(chosen > 0) {
                chosen--;            
            }
            $('#search-box).removeClass('selectedhash');
            $('#search-box:eq('+chosen+')').addClass('selectedhash');
             return false;

        }
    });


    $("#search-box").live("keyup",function(e){
        $.ajax({
        type: "POST",
        url: "/VCSWeb/wp-content/themes/i-excel-child/autocomplete.php",
        data:'keyword='+$(this).val(),
        beforeSend: function(){
            $("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
        },
        success: function(data){
            $("#suggesstion-box ").show();
            $("#suggesstion-box").html(data);
            $("#search-box").css("background","#FFF");
        }
        });
    });
});

function selectCountry(val) {
  $("#search-id").val(val);
  $("#suggesstion-box").hide();
}

function updateSearchBox(el) {
  $("#search-box").val($(el).html());   
}

</script>

Again, very new to AJax and any help will be greatly appreciated.