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. 45 Useful JavaScript Tips, Tricks and Best Practices

    <45 Useful JavaScript Tips, Tricks and Best Practices> http://flippinawesome.org/2013/12/23/45 ...

  2. merge sort 的javascript实现

    递归 上一篇blog里,用js实现了quicksort算法,quicksort算法是一个递归调用过程. 递归是一种非常强大的编程思想,它广泛的的存在于各种语言当中,尤其lisp的各种方言中,大量的使用 ...

  3. Angularjs 分页控件

    实现效果: 实现步骤: 1.分页页面:page.html,页面多余样式,需要自己去除. <div class="row" ng-show="conf.totalIt ...

  4. C#实现像微信PC版一样的扫码登录功能

    现在好些网站都支持扫码登录,感觉上安全了很多,但是本地程序扫码登录的不多,就用C#实现了一下,需要作如下准备 在官网上申请一个企业微信,有条件的话做个企业认证吧,我们的是认证过的,所以账号和本地其他系 ...

  5. 如何创建一个自己的.NET Core Global Tools

    索引 NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:https://www.bitadmincore.com 框架源码:https://github.com/chenyi ...

  6. 如何处理加括号的四则混合运算表达式——基于二叉树的实现（Eclipse平台 Java版）

    记得上<数据结构>课程时,利用栈的特性解决过四则混合运算表达式.而如今在编写小型关系数据库的时候,编译部分要处理where后面的逻辑表达式——检查语法正确与否的同时,还要将信息传给下一个接 ...

  7. Android 如何保存资源 Id 数组在 res/values/arrays.xml 里

    <resources> <!-- Tracks Information --> <array name="music_ids"> <ite ...

  8. Java50道经典习题-程序11 求不重复数字

    题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少?分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. public cla ...

  9. c++实验6 递归

    1 利用递归设计此函数. int p(int a,int b) { if(a>=b) ; else ; } //粘贴测试数据及运行结果: //测试数据 int main() { cout < ...

  10. [推荐] 网络侦查工具 NMAP 简单入门

    [推荐] 网络侦查工具 NMAP 简单入门 # 前言 作为一只运维开发,总是避不开要和网络打交道的.尤其是当自身能力到达瓶颈,开始从事云计算以求突破.会有搭建多台虚拟机的需要,这时候如果在手工的查询 ...