使用上下键突出显示从php ajax搜索中获取的搜索文本

我正在尝试切换从ajax结果集获取的搜索结果。事实上，问题是onkeyup和onkeydown，它不会在搜索结果中上下移动，这非常令人沮丧。但是，我尝试的代码如下所示：-

代码：-

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

.所选{背景：#EAEAEA；}
$（'.searchnews'）.keyup（函数（e）{
$（'input[name=“hidden_news”]”）val（“”）；
$（'input[name=“hidden_news”]'）.val（$.trim（$（this.val（）））；
如果（e.keyCode！=40&&e.keyCode！=38）{
var str=$（this.val（）；
$.ajax({
类型：'POST'，
url:'ajax/getnews.php'，
数据：'str='+str，
成功：功能（数据）{
if（data.length）


Jason，你能不能把我注释掉的那行从你的代码中删除，然后告诉我当你这样做的时候会发生什么

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

你看过JQuery UI Autocomplete吗？我相信它满足了你想要完成的任务。@DevinH。谢谢你的参考，它悄悄地帮了我很多。但我正在尝试使用JQuery手动完成。代码看起来应该可以工作。你能添加alert/console.log语句，看看是否引发了这些事件吗？@ParthShah是的，你是对的。代码是有效的，但问题是当我按下所选的li元素时，它是下一个而不是下一个li元素。谢谢你，伙计。你的代码似乎有效。