我正在使用jQuery开发一个自动建议的插件,我想添加Keypress事件,以便用户可以上下箭头键。另外,如果他们按Enter键,它将把该值添加到输入中。
这是我的HTML外观:
<input id="myInput" class="textInput" type="text" name="instructorName"/>
<label for="search"> </label>
<div id="myInputResults" class="results" style="display: block;">
<ul>
<li><a><div class="suggClass">Suggestion #1</div></a></li>
<li><a><div class="suggClass">Suggestion #2</div></a></li>
<li><a><div class="suggClass">Suggestion #3</div></a></li>
<li><a><div class="suggClass">Suggestion #4</div></a></li>
</ul>
</div>
到目前为止,我有这样的事情:
$("#myInput").keyup(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 40) { //If user "keys down"
//I would want to addClass 'hovered' to the "first <li>"
// Remove 'hovered' class from any other <li>'s
}
});
到目前为止,我还不确定使用的正确逻辑,以便用户可以向上,向下滚动并按“ enter”选择一个项目。
任何建议和帮助,将不胜感激!谢谢。
最佳答案
加上Psytronic的代码,这也应该涵盖“输入”键代码...
$(function(){
$("#myInput").keyup(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 40) {
if($("li.hovered").length == 0){
$("#myInputResults li").eq(0).addClass("hovered");
}else{
$("li.hovered").eq(0).removeClass("hovered").next().addClass("hovered");
}
};
if(code == 13) {
if($("li.hovered").length > 0){
$("#myInput").val($("li.hovered").eq(0).find("div.suggClass").eq(0).text());
}
}
});
});
关于javascript - 带有搜索框的jQuery关键事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/1583025/