<div id="assigned_user_wrap">
<input type="text" name="item" id="item" value="" />
</div>
<div id="suggestions">
<ul>
<li id="1">Item 1</li>
<li id="2">Item 2</li>
<li id="3">Item 3</li>
<li id="4">Item 4</li>
<li id="5">Item 5</li>
<li id="6">Item 6</li>
</ul>
</div>
当前的Javascript如下所示:
$j('#item').focus(function() {
// Register keypress events
$j('#item').keydown(function(e) {
console.log(e.keyCode);
switch(e.keyCode) {
// User pressed "up" arrow
case 38:
e.preventDefault();
navigate('up');
console.log('up');
break;
// User pressed "down" arrow
case 40:
e.preventDefault();
navigate('down');
console.log('down');
break;
// User pressed "enter"
case 13:
e.preventDefault();
if(item_name != '') {
$('#item').val(item_name);
console.log('item_name = ' + item_name);
}
break;
}
});
function navigate(direction){
if($(":visible","#suggestions").length > 0){
var lis = $j("li", "#suggestions");
if(direction == "down"){
var start = lis.eq(0);
} else {
var start = lis.filter(":last");
}
var active = $j("li.active:first", "#suggestions");
if(active.length > 0){
if(direction == "down"){
start = active.next();
} else {
start = active.prev();
}
}
lis.removeClass("active");
start.addClass("active");
item_name = start.text();
}
}
});//focus
当我加载页面并将鼠标放在文本输入字段上并开始单击向下箭头时,每个项目的突出显示都如预期的那样显示。但一旦我点击了输入字段,点击了任何键,然后再次返回到输入字段,并尝试在列表中导航,它将跳过项目。如你所见,我有几个控制台.log告诉我发生了什么。日志表明,当我单击向下或向上箭头(一次)时,它会触发事件(keyDown)多次发生,这使它看起来是在跳过项目。我不明白它为什么要这样做。有没有一种方法可以在文本字段变为“焦点”后但在按下键之前清除事件?还是我写错了什么?
