highlight searched text fetched from php ajax search using up and down key

Question

Iam trying to toggle through search result fetched from ajax result set. Actually the problem is onkeyup and onkeydown its not going up and down through search result which is quite frustrating. However, code which i tried are 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 out to rectify this problem. Thank You.

Answer 1

Jason, can you please remove the line I have commented out from your code and tell me what happens when you do that?

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