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: 0; padding: 0; /*border:none;*/ width:140px; height: 24px; float:left;}.select_list{display: none; position:absolute; z-index: 100;}.select_list li{ height:24px; margin: 0; padding: 0; 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。
以上所述就是本文的全部内容了，希望大家能够喜欢。
易网时代-编程资源站