jQuery使用keyup和key down循环选择列表项

Question

当用户注册到网站时，我试图在Jquery，ajax和json中自动提出建议以搜索城市。

到目前为止，我已经能够从数据库中获取结果了。我附加到了list。但是现在我需要使用up down选择数据并输入密钥。

按键事件是在给第一个城市上课。 但是我想使用向上和向下键循环显示所有结果，并在用户按下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" eg $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+"]"); }); });