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


Posted in Javascript onJuly 14, 2015

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

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

      具体的实现代码如下:

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<meta name="author" content="codetker" />
  <title> 表单选中弹出框</title>
<link href="css/reset.css" type="text/css" rel="Stylesheet" /> 
<link href="css/master.css" type="text/css" rel="Stylesheet" /> 

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

<body>
  <div class="wrap">
    <form class="center">
      <div class="input_wrap">
        <input name="input1" class="input input1" type="text"/>
        <ul class="input1_ul select_list">
          <li>问题1</li>
          <li>问题2</li>
          <li>问题3</li>
          <li>问题4</li>
          <li>问题5</li>
        </ul>
      </div>
    </form>
  </div>
<script type="text/javascript" src="js/jquery.codetker.datalist.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".input_wrap").myDatalist({"bgcolor":"red","widths":1,"heights":1}); 
});
</script>
</body>
</html>

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);

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

      需要代码的可以戳https://github.com/codetker/myDatalist。

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

Javascript 相关文章推荐
随窗体滑动的小插件sticky源码
Jun 21 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
javascript文本模板用法实例
Jul 31 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 #Javascript
jQuery实现模拟marquee标签效果
Jul 14 #Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 #Javascript
jQuery自动添加表单项的方法
Jul 13 #Javascript
JavaScript去除数组里重复值的方法
Jul 13 #Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 #Javascript
jQuery检测返回值的数据类型
Jul 13 #Javascript
You might like
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
Yii中表单用法实例详解
2016/01/05 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
详解node.js 事件循环
2020/07/22 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
Python restful框架接口开发实现
2020/04/13 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
Python基于execjs运行js过程解析
2020/11/27 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
.net C#面试题
2012/08/28 面试题
大学生个人求职信范文
2013/09/21 职场文书
英文简历中的自我评价
2013/10/06 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书