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元素的某个属性中设置项值。
timeStamp上的硬编码值（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;
        }
    }      
}

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

html表，按键按行选择

2 个答案: