Question

我正试图在Jquery，ajax和json中进行autosuggest，以便在用户注册网站时搜索城市。

到目前为止，我能够从数据库中获得结果。我将其附加到list.but现在我需要使用up down选择数据并输入密钥。

按键事件是向第一个城市添加课程。但我想使用键向上和向下遍历所有结果，并在用户点击输入时为城市文本框添加值。我在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

我想我现在已经解决了你的问题，希望这会对你有帮助..！

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

Jquery使用keyup和key down在循环中选择列表项

1 个答案: