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 相关文章推荐
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
vue.js表格分页示例
Oct 18 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
React组件refs的使用详解
Feb 09 Javascript
JS实现520 表白简单代码
May 21 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
微前端qiankun改造日渐庞大的项目教程
Jun 21 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
用cookies来跟踪识别用户
2006/10/09 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
JavaScript日历实现代码
2010/09/12 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
vue实现评价星星功能
2020/06/30 Javascript
Python 正则表达式操作指南
2009/05/04 Python
python中sets模块的用法实例
2014/09/30 Python
Python生成随机密码
2015/03/10 Python
python实现简单的socket server实例
2015/04/29 Python
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
HR喜欢的自荐信格式
2013/10/08 职场文书
2013年高中生自我评价
2013/10/23 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
美德少年事迹材料
2014/01/23 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
讲座主持词
2014/03/20 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
安全生产标语
2014/06/06 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
nginx lua 操作 mysql
2022/05/15 Servers