php - Jqueryは、キーアップとキーダウンを使用してループ内のリスト項目を選択します

Question

ユーザーがWebサイトに登録するときに都市を検索するために、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+"]");
     });
   });