带热键的可滚动无序列表
带热键的可滚动无序列表
提问于 2012-05-08 22:26:12
我正在尝试构建一个无序的列表I HTML，用户可以在其中“选择”曲目(基本上，当单击时，它们只是被复制到div中)。
虽然这很容易实现，用户也应该能够按下键盘上的一个键，使列表滚动到第一个listitem，第一个字母等于按下的键的字母。
供参考的图像：
让我们假设上面的列表中有200+词条，我想“搜索”/go to ，我点击键盘上的A，列表滚动到列表中以"a“开头的第一个实例。
我想知道是否已经有任何jQuery插件，它确实做到了这一点？:-)一直在搜索，但没有任何运气。如果不是，我当然要自己写，我只是不确定如何实际捕捉用户按下的字母。
任何关于如何创建这一点的提示都是非常感谢的！:-)
提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-05-09 01:17:18
我编写代码是为了覆盖<select multiple="multiple">的默认浏览器行为。我的结论是，尝试这样做是个坏主意，因为每个浏览器都是如何对待输入和jQuery代码的。
我建议Mortensen先生在滚动div中找到一个UI小部件或替代工具，例如复选框，这样可以提供更可预测的行为，然后将我的代码功能应用到这个选择中。我坚持使用泛型<select>代码有多种选项：
的不一致：，我很惊讶Opera的工作就像我想要的那样。IE7忽略了我的代码。Chrome:当按下一个键选择一个在视图之外的项目时，它会向上滚动，但不会向下滚动。令人费解。火狐:我不能让event.preventDefault()工作。所以我的全部代码都被忽略了。
http://jsfiddle.net/rtLF2/
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var indices = {};
var count = 1;
// build a dictionary matching first letters to indices of where
// they were found
$("#mylist option").each(function() {
var letter = $(this).text().charAt(0).toLowerCase();
if(!indices[letter]) {
indices[letter] = [];
}
indices[letter].push(count);
count++;
});
var lastletter = "";
var lastindex = -1;
$("#mylist").on('keypress', function(event) {
event.preventDefault();
var pressed = String.fromCharCode(event.keyCode).toLowerCase();
if(pressed == lastletter) {
lastindex == indices[lastletter].length - 1 ? lastindex = 0 : lastindex++;
}
else {
lastletter = pressed;
lastindex = 0;
}
if(indices[lastletter]) {
var target = indices[lastletter][lastindex];
$("#mylist option:selected").each(function() {
$(this).removeAttr("selected");
});
$("#mylist option:nth-child(" + target + ")").attr("selected", "selected");
}
});
});
</script>
</head>
<body>
<select id="mylist" multiple="multiple" size="5">
<option value="1">Tank</option>
<option value="2">APC</option>
<option>Mini tricycle</option>
<option>Bike</option>
<option>Megatank</option>
<option>Brawler</option>
<option>Trailer</option>
<option>Md Tank</option>
<option>Armored van</option>
<option>War Machine</option>
</select>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10507446
复制相关文章
相似问题
腾讯云开发者
