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

前端之家收集整理的这篇文章主要介绍了jQuery插件datalist实现很好看的input下拉列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

具体的实现代码如下:

HTML

@H_403_14@ 表单选中弹出框

<script type="text/javascript" src="js/jquery-1.11.0.js">

问题1
  • 问题2
  • 问题3
  • 问题4
  • 问题5
  • CSS(reset.css里面是初始化浏览器默认值用的,这里是style.css)

    JavaScript

    自定义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="/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="/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="/tag/SEO/" title="SEO">SEO</a>ut(function() {
        $(this).css("background-color","#fff");
      });
      //再次focus变为空,也可以改为某个默认值
      //datalist的<a href="/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浏览器默认为倒数第一个
        $(document).keydown(function(event) {
          /* 点击<a href="/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="/tag/SEO/" title="SEO">SEO</a>ut();
            $(inputUl).children('li').eq(n).mou<a href="/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="/tag/SEO/" title="SEO">SEO</a>ut();
            $(inputUl).children('li').eq(n).mou<a href="/tag/SEO/" title="SEO">SEO</a>ver();
          }else if(event.keyCode==13){//enter键
            $(inputUl).children('li').eq(n).mou<a href="/tag/SEO/" title="SEO">SEO</a>ut();
            $(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,document);

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

    需要代码的可以戳

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

    猜你在找的jQuery相关文章