【发布时间】：2017-12-01 22:12:48
【问题描述】：
我在我的搜索表单上使用 Google 建议的查询。我想要完成的是让用户使用 javascript/jquery 通过键盘与结果列表进行交互，
我希望用户
- 在建议的列表中使用箭头键向上/向下导航（不起作用）
- 用 ESC 取消列表（当前工作）
JSFiddle：
https://jsfiddle.net/y8r41qd7/1/
if ($("#suggest-results").length) {
var li = $('li');
var liSelected;
$(window).keydown(function(e) {
if (e.which === 40) {
console.log("Succeed on down arrow");
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.next();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.eq(0).addClass('selected');
}
} else {
liSelected = li.eq(0).addClass('selected');
}
} else if (e.which === 38) {
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.prev();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.last().addClass('selected');
}
} else {
liSelected = li.last().addClass('selected');
}
} else if (e.which === 27) {
$("#syrInputForm").val('');
$("#suggest-results").html(' ');
return false;
}
});
$(".header input[name=tag]").keyup(function() {
var searched = $(this).val();
var gghref = 'https://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q=' + searched;
var result;
$.ajax({
url: gghref,
type: "POST",
dataType: 'jsonp',
success: function(data) {
for (var i = 1; i < data[1].length; i++) {
if (data[1][i][0].length && data[1][i]) {
result += '<li class="gsuggested"><a href="#">' + data[1][i][0] + '</a></li>';
}
}
$("#suggest-results").html("<ul>" + result.replace("undefined", "") + "</ul>");
$('.gsuggested > a').click(function() {
var valoare = $(this).text();
$(".header input[name=tag]").val(valoare).focus();
$("#suggest-results").html(' ');
return false;
});
}
});
});
}#suggest-results .selected {
background: #CCD5DB;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="searchWidget">
<form action="" method="get" id="searchform" autocomplete="off" novalidate="true">
<div class="search-holder">
<span class="search-button">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</span>
<div class="form-control-wrap">
<input id="syrInputForm" type="text" class="form-control input-lg empty" name="tag" value="" placeholder="Search">
</div>
</div>
</form>
<div id="suggest-results"></div>
</div>
</div>是不是我做错了什么？
【问题讨论】：
-
看起来你从未分配过
liSelected。 -
@jmargolisvt jsfiddle.net/Vtn5Y 几乎相同的逻辑，但适用于这个
-
@Kaddath 感谢 Kaddath，我试过了，但现在问题是，它选择了第一个 li，然后它立即消失。我可以看到它正在被选中，但几毫秒后，它又消失了，恢复正常状态。
-
@Pelin 查看我发布的解决方案
-
@Deckerz 现在我明白它为什么消失了，非常感谢！
标签： javascript jquery html css