jQuery实现输入框聚焦,键盘上下键选择城市

前端之家收集整理的这篇文章主要介绍了jQuery实现输入框聚焦,键盘上下键选择城市前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_0@在最近有个项目中 需要实现当文本框聚焦的时候,可以键盘上下键选择内容,按enter键的时候,把内容传到输入框中,如图所示:

@H_403_0@

@H_403_0@实现代码如下:

@H_301_9@
/**
 *输入框聚焦,键盘上下键选择城市
*/
;(function($){
    $.fn.inputKey=(options){
        var settings=$.extend({
            'focusID':'#city2',//聚焦的输入框ID或class
            'slideBox':'.FdestinationBox',1)">内容容器Div
            'current':'current',1)">li有选中状态的class名
            'dataCity':'data-city'li上的属性 如:<li data-city="北京"></li>
        },options);
        
        return this.each((){
            var number = 0;
            var $focusDiv = $(settings.focusID);
            var $slideBox = $(settings.slideBox);
            var $slideBoxLi = $slideBox.find('li');
            var sizeLength = $slideBox.find('li').size();
            $focusDiv.focus((){
                sizeLength = $slideBox.find('li').size();
                $slideBoxLi.removeClass(settings.current);初始化current状态
                $slideBox.css({'display':'block'});    
            });
             
             if(window.addEventListener){
                 $focusDiv[0].addEventListener("input",1)"> () { 
                    number = 0;
                    sizeLength = $slideBox.find('li').size();
                    $slideBoxLi.removeClass(settings.current);
                    $slideBoxLi.eq(0).addClass(settings.current);
                }); 
             }else{
                   $focusDiv[0].attachEvent("input",1)">).addClass(settings.current);
                }); 
             }
             
            $focusDiv.on('keyup',1)">(e){
                console.log(sizeLength);
                  e=window.event||e;
                  if(e.keyCode==38){
                      if(number>0){
                          number--;
                      }{
                         number=sizeLength-1;   
                      }
                     
                      $slideBoxLi.removeClass(settings.current);
                      $slideBoxLi.eq(number).addClass(settings.current);
                  }
                  else if(e.keyCode==40if(sizeLength-1 > number){
                          number++{
                          number=0;
                      }
                      $slideBoxLi.removeClass(settings.current);
                      $slideBoxLi.eq(number).addClass(settings.current);
                  } 
                  
                  if(e.keyCode==13var dataCity = $slideBoxLi.eq(number).attr(settings.dataCity);
                      $focusDiv.val(dataCity);
                      $slideBox.fadeOut();
                      $focusDiv.blur();
                     $slideBoxLi.removeClass(settings.current);
                  }
            });
            
            $slideBoxLi.hover((){
                    number=$(this).index();
                    $slideBoxLi.removeClass(settings.current);
                    $().addClass(settings.current);
                });
            
            $('body').on('click',$slideBoxLi,1)">(e){
                e.preventDefault();
                 $slideBoxLi.eq(number).attr(settings.dataCity);
                  $focusDiv.val(dataCity);
                  number=0;
            });
            
        });
    }
        
})(jQuery);
@H_403_0@ 

@H_403_0@调用的方式:

@H_301_9@
$((){
    $("#city2").inputKey({
        'focusID':'#city2','slideBox':'.FdestinationBox''dataCity':'data-city'
    });
})
@H_403_0@ 

原文链接:/jquery/994508.html

猜你在找的jQuery相关文章