jquery-重置向下箭头键计数器
我正在尝试使用箭头键浏览“自动完成”下拉列表 JSONjquery-重置向下箭头键计数器,jquery,json,Jquery,Json,我正在尝试使用箭头键浏览“自动完成”下拉列表 JSON { "employees":[ { "name": "Alex" }, { "name": "Alice" }, { "name": "Brian" }, { "name": "Betsy" },
{
"employees":[
{
"name": "Alex"
},
{
"name": "Alice"
},
{
"name": "Brian"
},
{
"name": "Betsy"
},
{
"name": "Beck"
},
{
"name": "Bob"
},
{
"name": "Brad"
},
{
"name": "Brown"
}
]
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.selected{background-color:pink;}
</style>
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var keyCounter = -1;
jQuery.ajax({
type: "GET",
url: "myjson.json",
dataType: "json",
async: "true",
contentType: "application/x-javascript; charset=utf-8",
cache: "false",
success: function(response){
$("input#myInput").live("keyup", function(e){
var myInputVal = $("input#myInput").val();
var myInputValLen = $("input#myInput").val().length;
$("ul#myList").empty();
for (var x = 0; x < response.employees.length; x++) {
var empName = response.employees[x].name;
if (empName.substring(0, myInputValLen).toLowerCase().search(myInputVal.substring(0, myInputValLen).toLowerCase()) != -1) {
$("ul#myList").append("<li>" + empName + "</li>");
}
}
if (e.keyCode == 40) {
var keyCnter = keyCounter;
var listLen = $("li").length;
if (keyCnter != listLen - 1) {
keyCnter++;
$("li").removeClass("selected");
$("li").eq(keyCnter).addClass("selected");
keyCounter = keyCnter;
}
}
});
}
})
})
</script>
</head>
<body>
<input type="text" width="25" id="myInput">
<ul id="myList" style="margin:0px;"></ul>
</body>
</html>
无标题文件
.所选{背景色：粉红色；}
$（文档）.ready（函数（）{
var-keyCounter=-1；
jQuery.ajax({
键入：“获取”，
url:“myjson.json”，
数据类型：“json”，
异步：“真”，
contentType:“应用程序/x-javascript；字符集=utf-8”，
缓存：“false”，
成功：功能（响应）{
$（“输入#myInput”）.live（“键控”，函数（e）{
var myInputVal=$（“input#myInput”）.val（）；
var myInputValLen=$（“输入#myInput”）.val（）.length；
$（“ul#myList”）.empty（）；
对于（var x=0；x”+empName+””；
}
}
如果（e.keyCode==40）{
var keyCnter=键计数器；
var listLen=$（“li”）.长度；
if（keyCnter！=listLen-1）{
keyCnter++；
$（“li”）.removeClass（“选定”）；
$（“li”）.eq（keyCnter）.addClass（“选定”）；
键计数器=键计数器；
}
}
});
}
})
})
如何将计数器重置为-1？完全未经测试，但如果按下向下箭头以外的任何键，将计数器重置为-1是否有意义
if (e.keyCode == 40) {
...
} else {
keyCounter = -1;
}
完全未经测试，但如果按下向下箭头以外的任何键，将其重置为-1是否有意义
if (e.keyCode == 40) {
...
} else {
keyCounter = -1;
}
请重新阅读问题和复制步骤。我使用向下箭头键进行导航。我同意@Sheldon的观点，可能需要在处理程序开始时重置它…为此，我非常确定我的逻辑正确-用户将在文本框中键入（在这种情况下，键计数器将为-1）或点击“向下箭头，向下箭头，向下箭头”。如果他们停止按向下箭头键并开始键入其他内容，你不想重置索引吗？@Sheldon:是的，我想重置索引。但我的问题是——如果他们停止按向下箭头->然后开始在文本字段中键入->然后再次按向下箭头->索引应该重置。我试过你的解决方案，但不起作用。请尝试我的帖子中的步骤。看看-尽我所能，这是你想要的，唯一的（功能）区别是我建议的添加。我输入b，向下，r，向下到布朗。如果删除“else{key..”然后再次运行，您会发现它恢复到您当前的行为。请重新阅读问题和复制步骤。我正在使用向下箭头键进行导航。我同意@Sheldon，可能需要在处理程序开始时重置它…为此，请放一把小提琴。我相当确定我的逻辑正确-用户将键入文本box（在这种情况下，键计数器将为-1）或点击“向下箭头，向下箭头，向下箭头”。如果他们停止按向下箭头键并开始键入其他内容，你不想重置索引吗？@Sheldon：是的，我想重置索引。但我的问题是——如果他们停止按向下箭头键->然后开始键入文本字段->然后再次按向下箭头键->索引应该重置。我尝试了你的解决方案，但它不起作用。请y我的帖子中的步骤。看一看-尽我所能，这是你想要的，唯一的（功能）区别是我建议的添加。我键入b，down down，r，down down到Brown。如果你删除“else{key..”并再次运行，你会发现它恢复到你当前的行为。