捕获按键以过滤元素

Question

我正在<select>使用jQuery 创建替换,用div和链接替换它.

现在我想在我开始使用新选择打开键入内容时过滤它.

就像谷歌翻译在语言选择器上做的那样.

你有什么建议我怎么办？

我开始用以下东西:

$(document).bind('keypress', function(event) {
   //...
});

但我只捕获单个键,而不是整个键入的字符串.

---

重要:

• 我没有一个<input />检测keypress或keyup事件就可以了
• 我不想创建这个,<input />因为我只想在"新选择"中使用<div>'s <a>' 和's'
• 最近我需要使用箭头键在开放选择中导航+输入以使用我的键盘选择选项

Answer 1

您可以通过“侦听”窗口上按下的内容来实现此目的，然后检测按下的特定字母/字符串，搜索项目列表，如果发现它更改其 css 属性或添加新的“选定”类，即（演示=> http://jsfiddle.net/steweb/mC6tn/ ..尝试按任意键:)并在发现某些内容后添加按左或右btns，或输入）：

JS：（假设您想要查找内容并选择它的每个元素都有类“elem”）

var whatYouAreSearching = $('<div class="searching-string"></div>'); //just to see what string you're typing
$(document.body).append(whatYouAreSearching);

function search(what){
    what = what.toLowerCase();
    $('.elem').removeClass('selected'); //reset everything
    $.each($('.elem'),function(index,el){
        if($(el).html().toLowerCase().indexOf(what) > -1){
            $(el).addClass('selected');
            return false; //found, 'break' the each loop
        }
    });
}

var letterPressed = [];
var timeOutResetLetters = null;

$(window).keypress(function(e) {
    clearTimeout(timeOutResetLetters); //clear timeout, important!
    timeOutResetLetters = setTimeout(function(){ //if 500 ms of inactivity, reset array of letters pressed and searching string
        letterPressed = []; 
        whatYouAreSearching.html('');
    },500);
    letterPressed.push(String.fromCharCode(e.keyCode)); //look at the comment, thanks Niclas Sahlin 
    whatYouAreSearching.html(letterPressed.join('')); //show string
    search(letterPressed.join('')); //and search string by 'joining' characters array
});

编辑添加左/右/输入键处理

$(window).keydown(function(e){ //left right handling
    var currSelected = $('.elem.selected');

    if(e.keyCode == "37"){ //left, select prev
        if(currSelected.prev() && currSelected.prev().hasClass('elem')){
            currSelected.prev().addClass('selected');
            currSelected.removeClass('selected');   
        }
    }else if(e.keyCode == "39"){ //right, select next
        if(currSelected.next() && currSelected.next().hasClass('elem')){
            currSelected.next().addClass('selected');
            currSelected.removeClass('selected');   
        }
    }else if(e.keyCode == "13"){ //enter
       $('.entered').remove();
       $(document.body).append(currSelected.clone().addClass('entered'));
    }
});