html表格，按键选择行

Question

我有一个简单的表格（使用knockout.js），具有选择行的功能
http://jsfiddle.net/aDahT/447/

现在我想添加下一个功能。按记录名称的第一个字母键选择行。
例如如果用户按b，则选择记录bbb。
如果用户按h，则选择记录Ham。
如何实现？

Answer 1

首先，如果您要分叉小提琴，请先运行 JSLint。它将帮助您编写更清晰、更正确的代码。我想出了这个：http://jsfiddle.net/a0viedo/Guf3u/。

在keyPress() 处理程序中使用event.timeStamp，您可以确定用户是否正在输入或是否开始输入新单词。

注意（并非如此）小细节：

• 对于大型数据设置，性能极差。
• 区分大小写的选择器。如果要使用不区分大小写的 jquery 选择器，则必须在 html 元素的某些属性中设置项目值。
• 时间戳差异（750 毫秒）的硬编码值。此硬编码值必须反映键入期间两个键之间的阈值时间。

希望它能给你任何好主意。

Answer 2

这里有一个解决方案：http://jsfiddle.net/VEnsz/4/

我有数据绑定到外部元素：

<div style="width: 30em; max-height: 6em; overflow-x: hidden; overflow-y: auto; border: 1px groove grey" data-bind="event: {keypress: selectByKeyPress }">

（您可以在应用程序中选择另一个元素来附加按键事件）。

...并为您的模型添加了以下功能：

self.selectByKeyPress = function(data, e) 
{

    var key = String.fromCharCode(e.keyCode).toLowerCase();
    var items = self.allItems();
    for (var j=0; j<items.length; j++) {
        if (items[j].toLowerCase().indexOf(key) == 0) {
            self.selectCurrent(items[j]); 
            return;
        }
    }      
}

虽然您可能需要稍微改进此解决方案，但我觉得它更符合“淘汰”的做事方式，因此希望能为您提供构建功能的良好基础。