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. mysql in语句在java中的使用

    做权限的时候,通过role角色中的roleid,在auth权限中查找角色对应的权限. sql语句: SELECT authName from auth where authId in (1,2,3,4 ...

  2. .net core执行dotnet ef migrations createmodel等命令出错

    .net core执行dotnet ef migrations createmodel等命令出错 执行dotnet ef migrations createmodel.dotnet ef migrat ...

  3. leetcode 罗马数字转整数

    罗马数字包含以下七种字符:I,V,X,L,C,D 和M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做II ,即为两个并列的 1.1 ...

  4. 基于ASP.NET的MVC框架下的MvcPaper分页控件的使用技术

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using Webdiyer. ...

  5. Android 透明状态栏

    在 android 4 系统中可以设置透明状态栏. 但在 android 5.0 以上遇到问题.但问题是可以解决的,需要正确的设置 theme. 但是需要注意一点,5以上可以修改 status bar ...

  6. PHP set_error_handler()函数的使用

    我们写程序,难免会有问题(是经常会遇到问题 ),而PHP遇到错误时,就会给出出错脚本的位置.行数和原因.有很多人说,这并没有什么大不了.确实,在调试程序阶段,这确实是没啥的,而且我认为给出错误路径是必 ...

  7. set 集合数据类型

    set 数据类型 set 与列表类似,区别在于 set 不能包含重复的值. In [1]: a_list = ['a', 'b', 'c', 'b', 'd', 'm', 'n', 'n'] In [ ...

  8. BZOJ 2388--旅行规划(分块&单调栈&二分)

    2388: 旅行规划 Time Limit: 50 Sec  Memory Limit: 128 MBSubmit: 405  Solved: 118[Submit][Status][Discuss] ...

  9. WebLogic “Java 反序列化”过程远程命令执行

    WebLogic “Java 反序列化”过程远程命令执行 详细信息: https://www.seebug.org/vuldb/ssvid-89726 说明: 反序列化是指特定语言中将传递的对象序列化 ...

  10. flask 安装

    flask官网 : http://docs.jinkan.org/docs/flask/installation.html (基本上就是按照官网思路一点一点来的) 1,安装easy_install: ...