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 相关文章推荐
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
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
php实现网站插件机制的方法
2009/11/10 PHP
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python中异常重试的解决方案详解
2017/05/05 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
python 使用shutil复制图片的例子
2019/12/13 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
Python中logging日志库实例详解
2020/02/19 Python
Python csv文件记录流程代码解析
2020/07/16 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
建筑公司员工自我鉴定
2014/04/08 职场文书
中秋节寄语2015
2015/03/24 职场文书
教学质量月活动总结
2015/05/11 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android