Question

我已经创建了一个自动建议框，使用AJAX和jQuery与PHP和postgreSQL提供了一些帮助。我仍然是AJAX的新手，仍然在学习代码。幸运的是，自动建议工作得很好，但我注意到键盘的上下光标键根本不起作用。当我在建议列表中向上或向下箭头时没有任何反应。我可以使用鼠标在建议列表中进行选择，但不能使用键盘箭头选择。我想要做的是将keyup更改为keydown或在某处添加keydown，这样它就可以跨浏览器，然后根据keyCode在所需方向上移动选择。但是我仍然是AJAX的新手，每次我尝试编码时，建议的下拉列表都会停止工作或者只是崩溃页面。我知道它是在我脚本的ajax部分。不应该与HTML或我的php页面有任何关系。任何有助于让箭头键与鼠标一起工作的帮助表示赞赏。任何代码示例也将受到赞赏。

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

以下是表单中搜索输入的HTML代码：

<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>

以下是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
}
?>

这是我上次尝试使用ajax以使箭头键工作失败的尝试。就像我上面提到的那样，建议的框停止了这个尝试。

<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>

再次，非常新的AJax和任何帮助将不胜感激。

AJAX：箭头向上和向下在建议的下拉列表中不起作用

0 个答案: