jQuery插件datalist实现很好看的input下拉列表

2015-07-14 11:16作者：zhao

HTML5中定义了一种input框很好看的下拉列表--datalist，然而目前它的支持性并不好(万恶的IE，好在你要渐渐退役了...)。于是最近更据需求写了一个小型datalist插件，兼容到IE8(IE7应该没多少人用了吧？)。实现的具体需求如下:

当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦)，单击鼠标左键或者enter键将选中的列表的值输入到input框。

具体的实现代码如下：

HTML

<!DOCTYPE html>

<html>

<head>

<title> 表单选中弹出框</title>

</head>

<body>

</ul>

</div>

</form>

</div>

$(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。

以上所述就是本文的全部内容了，希望大家能够喜欢。