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:; padding:; /*border:none;*/ width:140px; height: 24px; float:left;}

.select_list{display: none; position:absolute; z-index:;}

.select_list li{ height:24px; margin:; padding:; 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。

jQuery插件开发之datalist的更多相关文章

  1. jQuery插件开发之boxScroll与marquee

    BoxScroll 常见图片轮播效果的简单实现.可以数字列表控制或者左右按键控制.逻辑很简单,下面的Marquee形成环,这个到了尽头得往回跑,看看注释就知道了. 图片轮播GitHub:https:/ ...

  2. jQuery插件开发之windowScroll

    回首望,曾经洋洋得意的代码现在不忍直视.曾经看起来碉堡的效果现在也能稍微弄点出来.社会在往前发展,人也得向前迈进. 参考于搜狗浏览器4.2版本首页的上下滚动效果.主要实现整个窗口的上下和左右滚动逻辑, ...

  3. 插件开发之360 DroidPlugin源码分析（五）Service预注册占坑

    请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52264977 在了解系统的activity,service,broa ...

  4. 插件开发之360 DroidPlugin源码分析（四）Activity预注册占坑

    请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52258434 在了解系统的activity,service,broa ...

  5. Chrome插件开发之manifest.json

    广而告之: Chrome插件之一键保存网页为PDF1.1发布 http://www.cnblogs.com/bdstjk/p/3179543.html 最近做“一键保存网页为PDF”过程中,对Chro ...

  6. Qgis插件开发之Qgis源码学习

    Qgis源码中的拖拽.zoomin/out等各个基础功能插件的实现位于qgis_app工程中. 具体头文件为: \QGIS\src\app\qgisapp.h 根据此类可以逐个找到Qgis的基础插件的 ...

  7. 插件开发之360 DroidPlugin源码分析（二）Hook机制

    转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52124397 前言:新插件的开发,可以说是为插件开发者带来了福音,虽然还很多坑要填补, ...

  8. 插件开发之360 DroidPlugin源码分析（一）初识

    转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52123450 DroidPlugin的是什么? 一种新的插件机制,一种免安装的运行机制 ...

  9. 新人大餐：2018最新Office插件开发之ExcelDNA开发XLL插件免费教学视频，五分钟包教包会

    原始链接:https://www.cnblogs.com/Charltsing/p/ExcelDnaVideoCourse.html QQ: 564955427 先解释一下,为什么要做这个视频: 我在 ...

随机推荐

  1. [c# 20问] 1. 何时使用class与struct

    POINTS struct为可以包含数据和函数的值类型 struct为值类型所以不需要堆(heap)而是在栈(stack)上分配空间 struct将数据直接存在struct中,而class只存引用类型 ...

  2. Hadoop HDFS HA启动出现两个StandBy NameNode

    可能是zkfc服务没有启动,正确的流程如下: 1.在nn001上格式化zkfc sudo -u hdfs hdfs zkfc -formatZK 2.在三个(或以上)节点上启动journalnode ...

  3. Java--下载历史版本登录账户

    目前在官网下载低于jdk1.8的java jdk的时候需要登陆,这边分享一个账号,方便下载 2696671285@qq.com 密码:Oracle123 转自-- jdk下载以前版本需要的账号(转) ...

  4. C/C++,python,java,C#月经贴问题

    在刚开始的时候,一直纠结于语言之争,什么什么有前途,什么什么没前途.对于什么的支持不好啦,个人信仰问题啦.什么都有. 首先最主要的一个个人观点:“语言不是老婆,不是一夫一妻制”.你可以同时拥有许多的女 ...

  5. Problem H: 小姐姐的QQ号（DFS）

    Contest - 河南省多校连萌(四) Problem H: 小姐姐的QQ号 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 297  Solved:  ...

  6. “全栈2019”Java第九十三章：内部类应用场景（迭代器设计模式）

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  7. sqlmap注入之tamper绕过WAF脚本列表

    本文作者:i春秋作者——玫瑰 QQ2230353371转载请保留文章出处 使用方法--tamper xxx.py apostrophemask.py用UTF-8全角字符替换单引号字符 apostrop ...

  8. [Linux] 如何在 Linux 中提取随机数

    如何在 Linux 中提取随机数 一.设备文件 /dev/random & /dev/urandom 字符特殊文件 /dev/random 和 /dev/urandom (存在于Linux 1 ...

  9. mxonline实战16：首页配置和xadmin进阶，Ueditor

      对应github地址:第16天   一. 首页配置 1. courses/models.py -->class Course增加字段,迁移数据库

  10. SpringCloud2.0

    一.网站架构演变过程 从传统架构(单体应用)  到   分布式架构(以项目进行拆分)  到  SOA架构(面向服务架构)  到   微服务架构 1) 传统架构: 其实就是SSH或者SSM,属于单点应用 ...