Select the desired text obtained from php ajax search using the up and down keys

Iam is trying to switch through the search result from the ajax result set. Actually the problem is that onkeyup and onkeydown don't go up and down the search result, which is quite tricky. However, the code I have tried is as follows: -

Code: -

<input type="search" class="searchnews" name="news" autocomplete="off" />
<div id="suggestion-list"></div>
<style>
 .selected {background: #EAEAEA;}
</style>
<script>
  $('.searchnews').keyup(function(e){
    $('input[name="hidden_news"]').val('');                         
    $('input[name="hidden_news"]').val($.trim($(this).val()));
    if(e.keyCode!=40 && e.keyCode!=38){
            var str = $(this).val();
        $.ajax({
            type:'POST',
            url:'ajax/getnews.php',
            data:'str='+str,
            success: function(data){
                if(data.length <= 2){
                    $("#suggestion-list").css('display','none');
                }
                else{
                    $("#suggestion-list").html('');
                    $("#suggestion-list").css('display','block');
                    $("#suggestion-list").append(data);
                }
            }
        });
    }

});
  $(document).keydown(function(e){
    if (e.keyCode == 38) { 
        var selected = $(".selected");
        $("#suggestion-list ul li").removeClass("selected");
        if (selected.prev().length == 0) {
            selected.siblings().last().addClass("selected");
        } else {
            selected.prev().addClass("selected");
        }
    }
    if (e.keyCode == 40) {
        var selected = $(".selected");
        $("#suggestion-list ul li").removeClass("selected");
        selected.next().addClass("selected");
        if (selected.next().length == 0) {
            selected.siblings().first().addClass("selected");
        } else {
            selected.next().addClass("selected");
        }
    }   
  });
</script>

**getnews.php**

<?php
    if(isset($_POST['str']) && $_POST['str']!=''){
        $str=$_POST['str'];
        $str1 = explode(' ',$str);
        foreach($str1 as $st){
        $sql[] =" title like '%".$st."%'";
        }
        $result=mysql_query("SELECT * FROM news WHERE ".implode('and',$sql)." or  title like '%".$str."%'");
        //$result=mysql_query("SELECT * FROM newsupdate WHERE title LIKE \"%$str%\" and status='1' ORDER BY published_date DESC");
        $i=0;
        if(mysql_num_rows($result) > 0){
                    echo '<ul>';
        while($row=mysql_fetch_array($result)){
        $i++;
        if($i==1){
        ?>
                <li class="selected"><a style="color:#030303;" target="_blank" >
                <span class="text"><?php echo preg_replace("/$str/i",'<span class="highlight">'.$str.'</span>',$row['title']); ?></span>
                </a></li>
        <?php   
        }
        else{
        ?>
            <li><a style="color:#030303;" target="_blank">
            <span class="text"><?php echo preg_replace("/$str/i",'<span class="highlight">'.$str.'</span>',$row['title']); ?>
            </span>
            </a></li>
        <?php
        }   
        }
        echo '</ul>';
        }
    }
?>

      

        
        
        
      

    

Please help me fix this problem. Thank.