首頁 > 開發者 > JavaScript
jQuery外掛程式datalist實現很好看的input下拉式清單，jquerydatalist
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。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
