php - Jquery使用keyup和keydown在循环中选择列表项

Question

当用户注册到网站时，我正在尝试在 Jquery、ajax 和 json 中进行自动建议以搜索城市。

到目前为止，我能够从数据库中获取结果。我附加到列表中。但现在我需要使用向上选择数据并输入键。

关键事件正在为第一个城市增加课程。但是我想使用向上和向下键遍历所有结果，并在用户按 Enter 时向城市文本框添加值。我在 php 中将数据限制为 5，因此列表项中有 5 个结果。

这是我的代码：

$('#city').keyup(function (event) {
  var input_query = $(this).val();
  $.post("get_city.php", {
    "query": input_query
  }, function (data) {
    $('#cityres').html("");
    $.each(data, function (i, item) {
      $('#cityresults').append("<li>" + item.city + "</li>");
    });
  }, "json");
  //below code is for key event
  var key = gtKeycode(event);
  if (key == 40) {
    // I am not sure i need to do this way
    $('li').first().addClass('SelectedCity');
  }
});

function gtKeycode(e) {
  var code;
  if (!e) var e = window.event;
  if (e.keyCode) code = e.keyCode;
  return code;
}

Answer 1

我想我现在有解决您问题的方法希望这对您有所帮助..！

1. 我制作了一个回显 json 编码的 php 文件，仅列出以下内容：

   //PHP "action.php?action=show"
   e.g $option[] =  array(
     'option0'=>".Choose an option",
     'option1'=>'somepage1',
     'option2'=>'somepage2',
     'option3'=>'somepage3');
   
   echo json_encode(array('options'=>$option));
   

2. 我编写了将作为输出处理程序的 html，然后将追加

   <select class="myoptions">
   
   </select> | <span class="optcap"></span>
   

3. JS

   function selectedOption()
   {
     var myoptions = $(".myoptions");
     $.ajax({
       type:'GET',
       url:'action.php?action=show',
       dataType:'JSON',
       success:function(data){
         if(data.s==1){
           myoptions.empty();
           $.each(data.options, function(x,val){
             myoptions.append("<option class='option' value='"+val.option0+"'>"+val.option0+"</option>"
               +"<option class='option' value='"+val.option1+"'>"+val.option1+"</option>"
               +"<option class='option' value='"+val.option2+"'>"+val.option2+"</option>"
               +"<option class='option' value='"+val.option3+"'>"+val.option3+"</option>");
           });
         }  
       }
     });
   }
   
   $(document).ready(function(){
     selectedOption();
     $(".myoptions").keyup(function(){
       var option = [];
   
       $("option.option:selected").each(function(x){
         option[x] = $(this).val();
       });
       $(".optcap").html("["+option+"]");
     });
   });