使用Javascript（jQuery）使用箭頭鍵（上下）選擇li元素

Question

我遇到了這個問題...我有一個可用作搜索器的輸入，當我寫一些東西時顯示匹配列表的ul並起作用， <ul>和<li>項是通過AJAX用PHP生成的

這是我的意見

<input type="text" class="form-control" id="searchProduct" placeholder="Search..." />

這是<ul>

<ul id="list">
    <li id="match1" class="itemList"></li>
    <li id="match2" class="itemList"></li>
    <li id="match3" class="itemList"></li>
</ul>

生成列表后，焦點仍然集中在輸入上，可以，但是我想使用箭頭鍵（上下）選擇其中一項

我正在嘗試在另一個答案中看到的代碼，但對我不起作用，我知道我做錯了什么，但我不知道問題出在哪里……這是javascript代碼

var li = $('#list > li');
var liSelected;
$(window).on('keydown', function(e){
    if(e.which === 40){
        if(liSelected){
            liSelected.removeClass('background');
            next = liSelected.next();
            if(next.length > 0){
                liSelected = next.addClass('background');

            }else{
                liSelected = li.eq(0).addClass('background');
            }
        }else{
            liSelected = li.eq(0).addClass('background');
        }
    }else if(e.which === 38){
        if(liSelected){
            liSelected.removeClass('background');
            next = liSelected.prev();
            if(next.length > 0){
                liSelected = next.addClass('background');

            }else{

                liSelected = li.last().addClass('background');
            }
        }else{

            liSelected = li.last().addClass('background');
        }
    }
});

新信息：

$('#searchProduct').keyup(function() {

var search = $(this).val();

if (search != '') {

    $.ajax({

        type: 'post',
        cache: false,
        url: '../includes/procedures/autocomplete.php',
        data: { search: search },

        success: function(datos) {

            $('#coincidenciasBusqueda').show();
            $('#coincidenciasBusqueda').html(datos);
        }
    });
}

}）;

Answer 1

每當您按下箭頭鍵時，我都會為您的窗口函數提供一個參數來捕獲值。 並打印出來。 就像下面一樣。

 var li = $('#list > li'); var liSelected; $(window).on('keydown', function(e){ var selected; if(e.which === 40){ if(liSelected){ liSelected.removeClass('background'); next = liSelected.next(); if(next.length > 0){ liSelected = next.addClass('background'); selected = next.text(); }else{ liSelected = li.eq(0).addClass('background'); selected = li.eq(0).text(); } }else{ liSelected = li.eq(0).addClass('background'); selected = li.eq(0).text(); } }else if(e.which === 38){ if(liSelected){ liSelected.removeClass('background'); next = liSelected.prev(); if(next.length > 0){ liSelected = next.addClass('background'); selected = next.text(); }else{ liSelected = li.last().addClass('background'); selected = li.last().text() } }else{ liSelected = li.last().addClass('background'); selected = li.last().text() } } console.log(selected) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style> .background{ background: hsla(0, 100%, 0%, 0.4); } </style> </head> <body> <input type="text" class="form-control" id="searchProduct" placeholder="Search..." /> <ul id="list"> <li id="match1" class="itemList">1</li> <li id="match2" class="itemList">2</li> <li id="match3" class="itemList">3</li> </ul> </body> </html>

如果要設置為輸入框，只需為其提供選定值，或者也可以將選定值替換為$('searchProduct') 。

Answer 2

我認為您正在尋找類似的東西：

$(function(){

var li = $('#list li'), n = -1, ll = li.length-1;
$('#searchProduct').keypress(function(e){
  var x = e.which;
  li.removeClass('background');
  if(x === 40 || x === 39 || x === 38 || x === 37){
    if(x === 40 || x === 39){
      n++;
      if(n > ll)n = 0;
    }
    else if(x === 38 || x === 37){
      n--;
      if(n < 0)n = ll;
    }
    var ci = li.get(n);
    ci.addClass('background'); $(this).val(ci.text());
  }
});

});

Answer 3

您可以使用內置數據列表來實現箭頭鍵選擇

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
<input type="submit">

Answer 4

您可以通過JSON 將jquery自動完成功能與ajax和PHP一起使用。 因此，現在您可以使用箭頭鍵進行選擇。 您還可以執行一些CSS來自定義下拉菜單的外觀。

使用Javascript（jQuery）使用箭頭鍵（上下）選擇li元素

問題描述

4 個解決方案

解決方案1
3 2016-07-12 02:34:51

解決方案2
1 2016-07-12 02:44:52

解決方案3
1 2018-11-16 00:51:40

解決方案4
0 2016-07-12 02:43:15

使用Javascript（jQuery）使用箭頭鍵（上下）選擇li元素

問題描述

4 個解決方案

解決方案1 3 2016-07-12 02:34:51

解決方案2 1 2016-07-12 02:44:52

解決方案3 1 2018-11-16 00:51:40

解決方案4 0 2016-07-12 02:43:15

解決方案1
3 2016-07-12 02:34:51

解決方案2
1 2016-07-12 02:44:52

解決方案3
1 2018-11-16 00:51:40

解決方案4
0 2016-07-12 02:43:15