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. 为Visual Studio添加一个“编码的UI测试生成器”的快捷方式

    在添加CodedUI测试用例时,经常需要查看捕获控件的属性.按照常规的方式,只有在添加一个全新的CodedUI编码测试时才能查看捕获控件的属性,这样很不方便. 下面介绍在Visual Studio工具 ...

  2. B/S 类项目改善的一些建议

    body { border: 1px solid #ddd; outline: 1300px solid #fff; margin: 16px auto; } body .markdown-body ...

  3. c#设计模式之代理模式(Proxy Pattern)

    引言 代理这个词语,大家在现实世界已经频繁的接触过,例如火车站代理售票点,因为这些代理售票点的存在,我们不必要去火车站的售票处就可以查询或者取到火车票.代理点本身是没有能力生产车票的,我们在代理处享受 ...

  4. 【VS2015】故障修复之dep6100,dep6200

    问题描述:把uwp程序往手机上(或者往模拟器上)部署时,vs ide提示我错误信息dep6100和dep6200,报告说“连接不到设备”. 这可把我愁坏了,各种方法都不行,最后发现问题出在Hyper- ...

  5. HBase – 探索HFile索引机制

    本文由  网易云发布. 作者: 范欣欣 本篇文章仅限内部分享,如需转载,请联系网易获取授权. 01 HFile索引结构解析 HFile中索引结构根据索引层级的不同分为两种:single-level和m ...

  6. ELK学习链接

    1.  ELK原理与介绍 2. ELK部署记录

  7. 467. Unique Substrings in Wraparound String

    Consider the string s to be the infinite wraparound string of "abcdefghijklmnopqrstuvwxyz" ...

  8. 【OCP-12c】CUUG最新考试原题整理及答案（071-12）

    12.(5-12)choose two:Examine the data in the CUSTOMERS table:You want to list all cities that have mo ...

  9. “全栈2019”Java多线程第十七章：同步锁详解

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

  10. JSP的介绍及语法详解

    一.简介 > HTML - HTML擅长显示一个静态的网页,但是不能调用Java程序. > Servlet - Servlet擅长调用Java程序和后台进行交互,但是它不擅长显示一个完整的 ...