矢印キーでli要素を選択（上下）ajaxレスポンスのliタグから（jQuery）を使用

Question

以下のコードでは、liタグのforeachループを使用して値を取得しています。これらのliには名前とIDが含まれています。 li項目を1つずつ表示する。下矢印キーまたは上矢印キーを押す。特定の値を押す。選択値が表示されたテキストボックスに値「a」または「b」が表示される。隠され、値がテキストボックスに表示されます.hereは私のコードです。

output: 
    <start output here> 
     <li class="optn_list" data-id=' 1 ' data-uname=' a '>value a</li> 
     <li class="optn_list" data-id=' 2 ' data-uname=' b '>value b</li> 
     <li class="optn_list" data-id=' 3' data-uname='c '>value c</li> 

    <end of output> 

     <input type="text" name="usr_name" id="search_user_name" value="" /> 
     <input type="hidden" id="hidden_id" value="" /> 


      function get_user_name() { 
          var name = 'xyz'; 
          $.ajax({ 
           url: "<?= base_url('controller/method') ?>", 
           type: "POST", 
           data: { 
            name: name, 
           }, 
           success: function (response) { 

            $(".user_res").html('<div id="getTagField"><ul>' + response + '</ul></div>'); 

$('input').keydown(function(e) 
{ 
if (key !== 40 && key !== 38) return; 
else{ 

//here how to write condition to select one by one list item using arrow up or down key with focus on selected item 

} 
)}; 


           } 

          }); 

         } 

Answer 1

私は正しくあなたを理解していれば、このコードをあなたのajax呼び出しに追加すれば、そのトリックを行うべきです。

ここから、あなたは要素で何をする必要があるのですか。

$(window).on('keydown', function(){ 
    switch(event.keyCode) 
    { 
     case 40: 
      if($("li[active]").length == 0) 
       $("li:first()") 
       .attr('active','1') 
       .css('color','red'); 
      else 
       $("li[active]") 
       .removeAttr('active') 
       .css('color','green') 
       .next() 
       .attr('active','1') 
       .css('color','red'); 

      break; 
     case 38: 
      if($("li[active]").length == 0) 
       $("li:last()") 
       .attr('active','1') 
       .css('color','red'); 
      else 
       $("li[active]") 
       .removeAttr('active') 
       .css('color','green') 
       .prev() 
       .attr('active','1') 
       .css('color','red'); 

      break; 
    } 
    $("#hidden_id").get(0).value = $("li[active]").data('id'); 
}); 

これを行うための現代的な方法があることがわかったので、ここに行きます。

$(window).on('keydown', function(e){ 
    switch(e.key) 
    { 
     case 'ArrowDown': 
      if($("li[active]").length == 0) 
       $("li:first()") 
       .attr('active','1') 
       .css('color','red'); 
      else 
       $("li[active]") 
       .removeAttr('active') 
       .css('color','green') 
       .next() 
       .attr('active','1') 
       .css('color','red'); 

      break; 
     case 'ArrowUp': 
      if($("li[active]").length == 0) 
       $("li:last()") 
       .attr('active','1') 
       .css('color','red'); 
      else 
       $("li[active]") 
       .removeAttr('active') 
       .css('color','green') 
       .prev() 
       .attr('active','1') 
       .css('color','red'); 

      break; 
    } 
    $("#hidden_id").get(0).value = $("li[active]").data('id'); 
}); 

あなたは私はあなたが要素に何をするかわからないので、変数を使用してコマンドのチェーンが、私はdidntのことを打破することができますが、それはここから適応することはかなり簡単です。

LIテキストを赤または緑で塗りました。選択したときに何が起こりたいのか分からなかったためです。