上/下键不使用javascript在无序列表中滚动
这一切都很好,除了用户应该能够使用上/下箭头上下滚动结果列表。我搞不懂为什么上升/下降根本不起作用。控制台正在记录各个功能是否正常工作,但选择实际上不起作用。任何线索都很好上/下键不使用javascript在无序列表中滚动,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这一切都很好,除了用户应该能够使用上/下箭头上下滚动结果列表。我搞不懂为什么上升/下降根本不起作用。控制台正在记录各个功能是否正常工作,但选择实际上不起作用。任何线索都很好 <input id="search_box" type="text" style="float:right;margin-bottom:2px;"> <div class="suggestions"> <ul id="results_l
<input id="search_box" type="text" style="float:right;margin-bottom:2px;">
<div class="suggestions">
<ul id="results_list">
</ul>
</div>
<style>
#results_list {
width: 220px;
text-align: left;
float: right;
padding: 0;
z-index: 10;
position: relative;
background-color: white;
}
#results_list li {
background: white;
border-bottom: solid 1px #eee;
border-left: solid 1px #eee;
border-right: solid 1px #eee;
padding: 2px 3px 2px 3px;
margin-bottom: 0px;
}
#results_list a {
text-decoration: none;
}
.selected {
background: black;
}
</style>
<script>
$('#search_box').keyup(function(e) {
if ($('#search_box').val().length) {
$.ajax({
url: '/api/jsonrpc',
type: 'POST',
data: JSON.stringify({
jsonrpc: '2.0',
method: 'search_titles',
params: [$('#search_box').val()],
id: 'jsonrpc'
}),
success: function (data) {
$('#results_list').show();
var items = [];
$('#results_list').empty();
$.each(data.result, function(i, item) {
items.push("<li><a href='/title/" + item._id + "'>" + item.Name + "</a></li>");
});
$('#results_list').append( items.join('') );
},
error: function (data) {
alert('There was a problem. Please try again.')
}
});
} else {
$('#results_list').hide();
}
})
var $listItems = $('li');
$('input').keydown(function(e)
{
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
if ( key != 40 && key != 38 ) return;
$listItems.removeClass('selected');
if ( key == 40 ) // Down key
{
console.log('called down')
if ( ! $selected.length || $selected.is(':last-child') ) {
$current = $listItems.eq(0);
}
else {
$current = $selected.next();
}
}
else if ( key == 38 ) // Up key
{
console.log('called up')
if ( ! $selected.length || $selected.is(':first-child') ) {
$current = $listItems.last();
}
else {
$current = $selected.prev();
}
}
$current.addClass('selected');
});
</script>
#结果列表{
宽度:220px;
文本对齐:左对齐;
浮动:对;
填充:0;
z指数:10;
位置:相对位置;
背景色:白色;
}
#结果列表李{
背景:白色;
边框底部:实心1px#eee;
左边框:实心1px#eee;
右边框:实心1px#eee;
填充物:2px 3px 2px 3px;
边缘底部:0px;
}
#结果列表a{
文字装饰:无;
}
.选定{
背景:黑色;
}
$(“#搜索框”).keyup(函数(e){
if($('#搜索框').val().length){
$.ajax({
url:“/api/jsonrpc”,
键入:“POST”,
数据:JSON.stringify({
jsonrpc:'2.0',
方法:“搜索标题”,
参数:[$(“#搜索框”).val(),
id:'jsonrpc'
}),
成功:功能(数据){
$(“#结果列表”).show();
var项目=[];
$(“#结果列表”).empty();
$.each(data.result,function(i,item){
项目。推送(“”);
});
$(“#结果列表”).append(items.join(“”));
},
错误:函数(数据){
警报('出现问题。请重试')
}
});
}否则{
$(“#结果列表”).hide();
}
})
变量$listItems=$('li');
$(‘输入’).keydown(函数(e)
{
var key=e.keyCode,
$selected=$listItems.filter('.selected'),
$current;
如果(键!=40&&key!=38)返回;
$listItems.removeClass('selected');
如果(键==40)//向下键
{
console.log('called down')
如果(!$selected.length | |$selected.is(“:last child”)){
$current=$listItems.eq(0);
}
否则{
$current=$selected.next();
}
}
如果(键==38)//向上键
{
console.log('called up')
如果(!$selected.length | |$selected.is(“:第一个子项”)){
$current=$listItems.last();
}
否则{
$current=$selected.prev();
}
}
$current.addClass('selected');
});
添加以下内容:
$listItems = $('li')
…直到Ajax成功回调结束
jQuery对象不会自动刷新自身以包含恰好与其原始选择器匹配的新添加元素,因此您的现有代码正在尝试滚动jQuery对象($listItems
),该对象实际上不包含任何元素,因为它是在填充列表之前创建的