我正在尝试找出一种方法来创建一个非常基本的自动完成功能,而无需第三方依赖。到目前为止,我已经通过 ajax 调用填充了结果列表,并且在每个 li 上使用鼠标单击事件,脚本按预期完成了字段。
我需要实现的是一个基于纯 js 的上/下/回车键导航系统,经过数小时的搜索后我放弃了。 this fiddle非常完美地解释了我的情况,不同之处在于它确实需要 jQuery。
我不想在这里粘贴任何我自己的代码,因为最终目标是学习这个过程,但由于我要链接到 jsfiddle,所以我需要这样做,所以这是 fiddle 。
fiddle HTML:
<div id="MainMenu">
<ul>
<li class="active"><a href="#">PATIENT TEST</a></li>
<li><a href="#">QC TEST</a></li>
<li><a href="#">REVIEW RESULTS</a></li>
<li><a href="#">OTHER</a></li>
</ul>
</div>
<a href="#" id="btnUp">Up</a>
<a href="#" id="btnDown">Down</a>
fiddle JS:
$(document).ready(function () {
$('#btnDown').click(function () {
var $current = $('#MainMenu ul li.active');
if ($current.next().length > 0) {
$('#MainMenu ul li').removeClass('active');
$current.next().addClass('active');
}
});
$('#btnUp').click(function () {
var $current = $('#MainMenu ul li.active');
if ($current.prev().length > 0) {
$('#MainMenu ul li').removeClass('active');
$current.prev().addClass('active');
}
});
$(window).keyup(function (e) {
var $current = $('#MainMenu ul li.active');
var $next;
if (e.keyCode == 38) {
$next = $current.prev();
} else if (e.keyCode == 40) {
$next = $current.next();
}
if ($next.length > 0) {
$('#MainMenu ul li').removeClass('active');
$next.addClass('active');
}
});
});
非常感谢任何愿意为我指出正确方向的人。
最佳答案
事实证明,这比我预期的要简单,而且我想出了以下代码,看起来效果很好。
需要考虑的事情是:
- 必须在要应用的 .focus() 的每个元素上指定 HTML 属性“tabindex”
- 要有 ENTER->submit 的感觉,您必须以 li 中的链接元素为目标(不过,我是通过此处未包含的 onclick 事件实现的)
- 这适用于极其简单的列表结构,到目前为止我还没有用嵌套下拉菜单测试过它
- 注意:这很可能不适合复制/粘贴的情况,但据我所知,此方法在程序上是正确的,并且可以让您开始开发更复杂的解决方案
这是基本的 HTML:
<input type="text" name="main_input" id="input" />
<ul id="list">
<li class="listElement"><a href="#" tabindex="1">li content</a></li>
<li class="listElement"><a href="#" tabindex="1">li content</a></li>
<li class="listElement"><a href="#" tabindex="1">li content</a></li>
</ul>
这是 JS 函数,当上面的列表被填充并显示时触发:
function scrollList() {
var list = document.getElementById('list'); // targets the <ul>
var first = list.firstChild; // targets the first <li>
var maininput = document.getElementById('input'); // targets the input, which triggers the functions populating the list
document.onkeydown = function(e) { // listen to keyboard events
switch (e.keyCode) {
case 38: // if the UP key is pressed
if (document.activeElement == (maininput || first)) { break; } // stop the script if the focus is on the input or first element
else { document.activeElement.parentNode.previousSibling.firstChild.focus(); } // select the element before the current, and focus it
break;
case 40: // if the DOWN key is pressed
if (document.activeElement == maininput) { first.firstChild.focus(); } // if the currently focused element is the main input --> focus the first <li>
else { document.activeElement.parentNode.nextSibling.firstChild.focus(); } // target the currently focused element -> <a>, go up a node -> <li>, select the next node, go down a node and focus it
break;
}
}
}
提前为代码的有点困惑的布局道歉,我想出的函数有点复杂,为了解释目的我已经去掉了大部分。
不用说,我期待对上述解决方案的错误、改进或已知兼容性问题的任何评论。
关于javascript - 箭头键通过 li 导航(无 jquery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33790668/