我正在创建一个<select>
替换使用 jQuery 将其替换为 div 和链接。
现在我想要filter当我开始在新的选择打开的情况下输入内容时。
Like 谷歌翻译 http://translate.google.com/在语言选择器上执行。
您对我如何进行有什么建议吗?
我开始做一些事情:
$(document).bind('keypress', function(event) {
//...
});
但我只捕获单个键,而不是整个键入的字符串。
重要的:
- 我没有
<input />
来检测keypress
or keyup
其上的事件
- 我不想创建这个
<input />
因为我只想使用<div>
's and <a>
在“新选择”上
- 最近,我需要使用箭头键 + Enter 在打开的选择上导航,以使用键盘选择选项
您可以通过“监听”窗口上按下的内容,然后检测按下的特定字母/字符串,搜索项目列表,如果发现它更改其 css 属性或添加新的“选定”类来实现此目的,即(演示=>http://jsfiddle.net/steweb/mC6tn/ http://jsfiddle.net/steweb/mC6tn/..尝试按任意键:)并且added找到东西后按左或右 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
});
EDIT添加了左/右/回车键处理
$(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'));
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)