在最近有个项目中 需要实现当文本框聚焦的时候，可以键盘上下键选择内容，按enter键的时候，把内容传到输入框中，如图所示：
实现代码如下：
/**
*输入框聚焦，键盘上下键选择城市
*/
;(function($){
$.fn.inputKey=function(options){
var settings=$.extend({
'focusID':'#city2',//聚焦的输入框ID或class
'slideBox':'.FdestinationBox',//内容容器Div
'current':'current',//li有选中状态的class名
'dataCity':'data-city'//li上的属性 如：<li data-city="北京"></li>
},options); return this.each(function(){
var number = 0;
var $focusDiv = $(settings.focusID);
var $slideBox = $(settings.slideBox);
var $slideBoxLi = $slideBox.find('li');
var sizeLength = $slideBox.find('li').size();
$focusDiv.focus(function(){
// sizeLength = $slideBox.find('li').size();
$slideBoxLi.removeClass(settings.current);//初始化current状态
$slideBox.css({'display':'block'});
}); if(window.addEventListener){
$focusDiv[0].addEventListener("input", function () {
number = 0;
sizeLength = $slideBox.find('li').size();
$slideBoxLi.removeClass(settings.current);
$slideBoxLi.eq(0).addClass(settings.current);
});
}else{
$focusDiv[0].attachEvent("input", function () {
number = 0;
sizeLength = $slideBox.find('li').size();
$slideBoxLi.removeClass(settings.current);
$slideBoxLi.eq(0).addClass(settings.current);
});
} $focusDiv.on('keyup',function(e){
console.log(sizeLength);
e=window.event||e;
if(e.keyCode==38){
if(number>0){
number--;
}else{
number=sizeLength-1;
} $slideBoxLi.removeClass(settings.current);
$slideBoxLi.eq(number).addClass(settings.current);
}
else if(e.keyCode==40){
if(sizeLength-1 > number){
number++;
}else{
number=0;
}
$slideBoxLi.removeClass(settings.current);
$slideBoxLi.eq(number).addClass(settings.current);
} else if(e.keyCode==13){
var dataCity = $slideBoxLi.eq(number).attr(settings.dataCity);
$focusDiv.val(dataCity);
$slideBox.fadeOut();
$focusDiv.blur();
$slideBoxLi.removeClass(settings.current);
}
}); $slideBoxLi.hover(function(){
number=$(this).index();
$slideBoxLi.removeClass(settings.current);
$(this).addClass(settings.current);
}); $('body').on('click',$slideBoxLi,function(e){
e.preventDefault();
var dataCity = $slideBoxLi.eq(number).attr(settings.dataCity);
$focusDiv.val(dataCity);
number=0;
}); });
} })(jQuery);
调用的方式：
$(function(){
$("#city2").inputKey({
'focusID':'#city2',
'slideBox':'.FdestinationBox',
'current':'current',
'dataCity':'data-city'
});
})