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. easyui - using

    using 是 easyloader.load 简写                  using('calendar', function()  { alert("加载calendar成功 ...

  2. bootstrap-treeview中文API 以及后台JSON数据处理

    bootstrap-treeview   简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bo ...

  3. C# 实现自动化打开和关闭可执行文件（或 关闭停止与系统交互的可执行文件）

    string file =Application.StartupPath+@"\WinFrm_Main.exe";//运行程序位置 public Form1() { Initial ...

  4. .Net Core使用HttpClient请求Web API注意事项

    HttpClient 使用HttpClient可以很方便的请求Web API,但在使用时有一些需要注意的地方,不然会给你的程序带来毁灭性的问题. HttpClient是一个继承了IDisposable ...

  5. CCF CSP 201803-1 跳一跳

    题目链接:http://118.190.20.162/view.page?gpid=T73 问题描述 近来,跳一跳这款小游戏风靡全国,受到不少玩家的喜爱. 简化后的跳一跳规则如下:玩家每次从当前方块跳 ...

  6. [Scala随用随学] —— sealed声明的作用

    今天在看MLlib的源码时,看到Vector的声明是sealed trait,很好奇这个sealed有什么作用,与是搜到了这个文章: http://www.cnblogs.com/rollenholt ...

  7. Linux磁盘及文件系统（二）Linux下磁盘命名和分区

    在为主机添加硬盘之前,首先需要了解Linux系统下对硬盘和分区的命令方法 一.磁盘命名 Linux下对SCSI和SATA设备是以sd命名的,第一个SCSI设备是sda,第二个是sdb....以此类推. ...

  8. JMeterPlugin性能监控

    GUI界面中的plugins manager中的jpgc-Standard set,其中共包含以下的文件: jpgc-dummy jpgc-fifo jpgc-graphs-basic jpgc-pe ...

  9. Spring AOP 概述

    1. AOP的概念 AOP 是Aspect-Oriented Programming(面向方面编程或者面向切面)的简称,维基百科对其解释如下: Aspect是一种新的模块化机制,用来描述分散在对象.类 ...

  10. C#-WebForm-设置div边框为内边框：box-sizing:border-box;

    设置div边框为内边框:box-sizing:border-box;