jQueryプラグインdatalistは美しいinputドロップダウンリストを実現します

HTML 5ではinputボックスがきれいなドロップダウンリストであるdatalistが定義されていますが、現在のサポートはよくありません(万悪のIE、幸いにもあなたはだんだん引退します...).そこで最近さらに需要に応じて小型datalistプラグインを書いて、IE 8に互換性があります(IE 7はあまり使われていないのではないでしょうか?)具体的なニーズは次のとおりです.
選択されている場合(blurフォーカスをトリガー)(マウスでもtabキーでも)inputボックスを空にしてカスタムのドロップダウンリストを表示し、キーボードの上下キーで選択できます(マウスはもちろんできない理由はありません)、マウスの左ボタンまたはenterキーをクリックして選択したリストの値をinputボックスに入力します.
具体的な実装コードは以下の通りです.
HTML

  
 
 





  

    

      

        
        

          
  1
          
  2
          
  3
          
  4
          
  5
        
      
    
  


$(document).ready(function(){
  $(".input_wrap").myDatalist({"bgcolor":"red","widths":1,"heights":1}); 
});

CSS(reset.cssではブラウザのデフォルト値を初期化するために使用され、ここではstyle.css)

.wrap{ margin:0 auto; font-family: "    ";font-size: 14px;}
.center{ margin: 0 auto; width:500px;}
.input{ margin: 0; padding: 0; /*border:none;*/ width:140px; height: 24px; float:left;}
.select_list{display: none; position:absolute; z-index: 100;}
.select_list li{ height:24px; margin: 0; padding: 0; background-color: #fff; cursor: pointer; list-style: none; position:relative;}
.select_list li:hover{ background-color: red;}
.input_wrap{ position:relative; }

JavaScript

/*
  datalist 0.1 
     datalist  ，  html5 input  datalist   
    IE8+,Firefox,Chrome      
*/

;(function($,window,document,undefined){ //undefinde    undefined，    
  //            

  //      
  var Datalist=function(ele,opt){
    this.$element=ele;
    this.defaults={
      'bgcolor':'green',
      'widths':1,
      'heights':1
    },
    this.options=$.extend({}, this.defaults, opt);
  }
  //    
  Datalist.prototype={
    showList:function(){
      var color=this.options.bgcolor;
      var width=this.options.widths;
      var height=this.options.heights; //   

      var obj=this.$element; //obj       div     ，    positive：relative  ,  datalist  。
      var input=$(obj).children().eq(0); //input  
      var inputUl=$(obj).children().eq(1); //datalist  
      //    datalist      
      $(inputUl).css({
        "top":$(input).outerHeight()+"px",
        "width":$(input).outerWidth()*width+"px"
      });
      $(inputUl).children().css({
        "width":$(input).outerWidth()*width+"px",
        "height":$(input).outerHeight()*height+"px"
      });

      $(inputUl).children('li').mouseover(function() {
        $(this).css("background-color",color);
        $(this).siblings().css("background-color","#fff");
      });
      $(inputUl).children('li').mouseout(function() {
        $(this).css("background-color","#fff");
      });
      //  focus   ，          
      //datalist      
      $(input).focus(function() {
        if($(this).val()!=""){
          $(this).val("");
        }
        $(inputUl).slideDown(500);

        var n=-1; //    ,-1     。 n=-1    enter           
        $(document).keydown(function(event) {
          /*        ，datalist   */
          stopDefaultAndBubble(event);
          if(event.keyCode==38){//    
            if(n==0||n==-1){
              n=4;
            }else{
              n--;
            }
            $(inputUl).children('li').eq(n).siblings().mouseout();
            $(inputUl).children('li').eq(n).mouseover();
          }else if(event.keyCode==40){//    
            if(n==4){
              n=0;
            }else{
              n++;
            }
            $(inputUl).children('li').eq(n).siblings().mouseout();
            $(inputUl).children('li').eq(n).mouseover();
          }else if(event.keyCode==13){//enter 
            $(inputUl).children('li').eq(n).mouseout();
            $(input).val( $(inputUl).children('li').eq(n).text() );
            n=-1;
          }
        });


        //       
        function stopDefaultAndBubble(e){
          e=e||window.event;
          //      
          if (e.preventDefault) {
            e.preventDefault();
          }
          e.returnValue=false;

          //    
          if (e.stopPropagation) {
            e.stopPropagation();
          }
          e.cancelBubble=true;
        }

      });
      $(input).blur(function() {
        $(inputUl).slideUp(500);
      });
      $(inputUl).delegate('li', 'click', function() {
          $(input).val( $(this).text() );
      });

      return this;
    }
  }
  //      Datalist  
  $.fn.myDatalist=function(options){
    //    
    var datalist=new Datalist(this,options);
    //     
    return datalist.showList();
  }
 
})(jQuery,window,document);

ここではulliリストを用いてdatalist optionsをシミュレートする.実装ロジックは非常に簡単で、少し注意しなければならないのはdiv.input_です.wrapは相対的に位置決めされており、便利です.input1_ulは相対的に位置決めされる.需要は多くの入力ボックスがあり、互いに影響しないため、ここではinput 1である.どうやら私が自分で開発した最初のプラグインで、markは覚えています.
コードが必要なスタンプhttps://github.com/codetker/myDatalist.
以上が本文のすべてですが、お好きになってください.