jQuery插件datalist實(shí)現(xiàn)很好看的input下拉列表

2024-05-06 16:23:07

字體：大中小

供稿：網(wǎng)友

本文給大家分享的是使用jQuery實(shí)現(xiàn)的房HTML5中的一個(gè)好看的input框很好看的下拉列表--datalist，兼容性非常不錯(cuò)，這里推薦給大家，有需要的小伙伴可以參考下。

HTML5中定義了一種input框很好看的下拉列表--datalist，然而目前它的支持性并不好(萬(wàn)惡的IE，好在你要漸漸退役了...)。于是最近更據(jù)需求寫(xiě)了一個(gè)小型datalist插件，兼容到IE8(IE7應(yīng)該沒(méi)多少人用了吧?)。實(shí)現(xiàn)的具體需求如下:

當(dāng)被選中的時(shí)候(觸發(fā)blur焦點(diǎn))(不管是鼠標(biāo)還是tab鍵)清空input框并且顯示自定義的下拉列表,然后可以用鍵盤(pán)的上下鍵選擇(鼠標(biāo)當(dāng)然肯定沒(méi)理由不可以啦)，單擊鼠標(biāo)左鍵或者enter鍵將選中的列表的值輸入到input框。

具體的實(shí)現(xiàn)代碼如下：

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>問(wèn)題1</li>

<li>問(wèn)題2</li>

<li>問(wèn)題3</li>

<li>問(wèn)題4</li>

<li>問(wèn)題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里面是初始化瀏覽器默認(rèn)值用的，這里是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插件，實(shí)現(xiàn)html5中input元素datalist的效果

兼容IE8+,Firefox,Chrome等常見(jiàn)瀏覽器

*/

;(function($,window,document,undefined){ //undefinde是真實(shí)的undefined，并非參數(shù)

//將可選擇的變量傳遞給方法

//定義構(gòu)造函數(shù)

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之類的元素，應(yīng)該擁有positive：relative屬性,方便datalist定位。

var input=$(obj).children().eq(0); //input元素

var inputUl=$(obj).children().eq(1); //datalist元素

//設(shè)置彈出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變?yōu)榭眨部梢愿臑槟硞€(gè)默認(rèn)值

//datalist的顯示和隱藏

$(input).focus(function() {

if($(this).val()!=""){

$(this).val("");

}

$(inputUl).slideDown(500);

var n=-1; //記錄位置,-1表示未選中。當(dāng)n=-1時(shí)直接按enter瀏覽器默認(rèn)為倒數(shù)第一個(gè)

$(document).keydown(function(event) {

/* 點(diǎn)擊鍵盤(pán)上下鍵，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;

}

});

//去掉瀏覽器默認(rèn)

function stopDefaultAndBubble(e){

e=e||window.event;

//阻止默認(rèn)行為

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對(duì)象

$.fn.myDatalist=function(options){

//創(chuàng)建實(shí)體

var datalist=new Datalist(this,options);

//調(diào)用其方法

return datalist.showList();

}

})(jQuery,window,document);

這里用ul li列表模擬datalist options。實(shí)現(xiàn)邏輯非常簡(jiǎn)單，稍微需要注意點(diǎn)的是div.input_wrap是用相對(duì)定位的，方便ul.input1_ul相對(duì)進(jìn)行定位。由于需求有很多的輸入框且相互之間不影響，因此這里是input1。好歹是我自己開(kāi)發(fā)的第一個(gè)插件，mark一記。

需要代碼的可以戳https://github.com/codetker/myDatalist。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

上一篇：常用jQuery代碼分享

下一篇：javascript實(shí)現(xiàn)動(dòng)態(tài)表頭及表列的展現(xiàn)方法