javascript - html表格，按键选择行

Question

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

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

Answer 1

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

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

注意（不那么）小细节：

• 对于大型数据设置，性能极差。
• 区分大小写的选择器。如果要使用不区分大小写的 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;
        }
    }      
}

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