jQuery插件datalist实现很好看的input下拉列表

jQuery 2018-12-31

HTML5中定义了一种input框很好看的下拉列表--datalist，然而目前它的支持性并不好(万恶的IE，好在你要渐渐退役了...)。于是最近更据需求写了一个小型datalist插件，兼容到IE8(IE7应该没多少人用了吧？)。实现的具体需求如下:

当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦)，单击鼠标左键或者enter键将选中的列表的值输入到input框。

具体的实现代码如下：

HTML

rush:xhtml;"> 表单选中弹出框

问题1

问题2

问题3

问题4

问题5

CSS(reset.css里面是初始化浏览器默认值用的，这里是style.css)

rush: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

rush:js;"> /* 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<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>,方便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').mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ver(function() {
    $(this).css("background-color",color);
    $(this).siblings().css("background-color","#fff");
  });
  $(inputUl).children('li').mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut(function() {
    $(this).css("background-color","#fff");
  });
  //再次focus变为空，也可以改为某个<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认值
  //datalist的<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>和隐藏
  $(input).focus(function() {
    if($(this).val()!=""){
      $(this).val("");
    }
    $(inputUl).slideDown(500);

    var n=-1; //记录位置,-1表示未选中。当n=-1时直接按enter浏览器<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认为倒数第<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>
    $(document).keydown(function(event) {
      /* 点击<a href="https://www.jb51.cc/tag/jianpan/" target="_blank" class="keywords">键盘</a>上下键，datalist变化 */
      stopDefaultAndBubble(event);
      if(event.keyCode==38){//向上按钮
        if(n==0||n==-1){
          n=4;
        }else{
          n--;
        }
        $(inputUl).children('li').eq(n).siblings().mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut();
        $(inputUl).children('li').eq(n).mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ver();
      }else if(event.keyCode==40){//向上按钮
        if(n==4){
          n=0;
        }else{
          n++;
        }
        $(inputUl).children('li').eq(n).siblings().mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut();
        $(inputUl).children('li').eq(n).mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ver();
      }else if(event.keyCode==13){//enter键
        $(inputUl).children('li').eq(n).mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut();
        $(input).val( $(inputUl).children('li').eq(n).text() );
        n=-1;
      }
    });


    //去掉浏览器<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认
    function stopDefaultAndBubble(e){
      e=e||window.event;
      //阻止<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认行为
      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,document);

这里用ul li列表模拟datalist options。实现逻辑非常简单，稍微需要注意点的是div.input_wrap是用相对定位的，方便ul.input1_ul相对进行定位。由于需求有很多的输入框且相互之间不影响，因此这里是input1。好歹是我自己开发的第一个插件，mark一记。

需要代码的可以戳。

以上所述就是本文的全部内容了，希望大家能够喜欢。

datalist jQuery 下拉列表