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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
javascript 节点排序 2
Jan 31 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php通过session防url攻击方法
2014/12/10 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
使用js画图之饼图
2015/01/12 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
Python数据类型详解(四)字典:dict
2016/05/12 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Django models filter筛选条件详解
2020/03/16 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
本科毕业自我鉴定
2014/03/20 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
教师求职信怎么写
2015/03/20 职场文书
催款函怎么写
2015/06/24 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS