捕获按键以过滤元素 [英] Capture keypress to filter elements

问题描述

我正在创建< select> 替换，使用jQuery将其替换为div和链接。

I'm creating a <select> replacement using jQuery to replace it with divs and links.

现在，当我开始用新选择打开键入内容时，我想过滤。

Now I want to filter it when I start to type something with the new select open.

喜欢 Google翻译。

您有什么建议我如何继续？

Do you have any advice how do i proceed?

我用以下内容开始：

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

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

But I capture only single keys, not the whole typed string.

重要提示：

• I没有< input /> 来检测 keypress 或 keyup 上面的活动


• 我不想创建这个< input /> 因为我想使用只有< div> 和< a> 的新选择


• 最近我需要使用方向键导航打开选择+输入以使用我的键盘选择选项

• I don't have an <input /> to detect the keypress or keyup events on it
• I prefer not to create this <input /> since I want to use only <div>'s and <a>'s on the "new select"
• Lately I'll need to navigate on the open select with arrow keys + enter to select the option with my keyboard

推荐答案

您可以通过监听窗口上按下的内容，然后检测按下的特定字母/字符串，搜索项目列表，如果您发现它更改其css属性或添加一个新的选定类即（demo => http：//jsfiddle.n et / steweb / mC6tn / ..按什么:)和添加后找到的东西按左或右btns，或输入）：

You could achieve this by 'listening' about what is pressed on the window, and then detecting the particular letter/string pressed, search through items list and if you find it change its css properties or add a new 'selected' class i.e. (demo => http://jsfiddle.net/steweb/mC6tn/ ..try pressing whatever :) and added after something found press left or right btns, or enter) :

JS :(假设您想要找到的每个元素并选择它有类'elem'）

JS: (supposing that each element you want to find something into and select it has class '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
});

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

EDIT added left/right/enter keys handling

$(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'));
    }
});

这篇关于捕获按键以过滤元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！