Jquery 使用键向上和向下键循环选择列表项 - Jquery Select list items in loop using keyup and key down

Jquery Select list items in loop using keyup and key down

本文关键字：循环选择列表 Jquery | 更新日期: 2023-09-27

我正在尝试在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;
}

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

我制作了一个回显 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));

我编造了 html 作为输出的处理程序，然后将附加

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

.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+"]");
  });
});