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; 
     } 
    }  
} 

雖然你可能需要在一定程度上完善這一解決方案，我覺得這是更符合做事的「淘汰賽」的方式保持一致，所以希望能夠爲您提供構建功能的良好基礎。