Question

我遇到了这个问题...我有一个作为搜索者的输入，当我写一些东西时，它会显示一个带有匹配列表的ul并且它有效，使用PHP通过AJAX

生成<ul>和<li>项

这是我的输入

<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

每次按下箭头键时，我都会给你的窗口函数一个参数来捕获值。并打印出来。就像下面一样。

＆＃13;

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)
});

＆＃13;

<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>

＆＃13;

如果您想设置为输入框，只需为其选择一个值，或者您也可以将所选内容替换为$('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

You could use jquery autocomplete以及通过JSON的ajax和PHP。所以现在你可以使用箭头键来选择。您还可以使用一些CSS来自定义下拉列表的外观。

使用Javascript（jQuery）使用箭头键（向上和向下）选择li元素

4 个答案: