0

当用户注册到网站时,我正在尝试在 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;
}
4

1 回答 1

0

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

  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+"]");
      });
    });
    
于 2012-06-11T08:10:03.967 回答