;(function ($,window,document,undefined) { var _pluginName="jqDropdown"; var defaults = { items:[] }; var parm=[]; //es5 filter hack if (!Array.prototype.filter){ Array.prototype.filter = function(fun){ var len = this.length; if (typeof fun != "function") throw new TypeError(); var res = new Array(); var _arg = arguments[1]; for (var i = 0; i < len; i++){ if (i in this){ var val = this[i]; if (fun.call(_arg, val, i, this)) res.push(val); } } return res; }; } if(!Array.prototype.indexOf) { Array.prototype.indexOf = function (elem, startFrom) { var startFrom = startFrom || 0; if (startFrom > this.length) return -1; for (var i = 0; i < this.length; i++) { if (this[i] == elem && startFrom <= i) { return i; } else if (this[i] == elem && startFrom > i) { return -1; } } return -1; } } var init = function (o,opts,okFn,cancelFn) { var _panel=$(o); var _ul=_panel.find(".dd-select:eq(0)"); function createDropItems(items,p){ p=p||[]; _ul.empty(); var _curretVal=$(".iptdiplay").val(); for(var i=0,len=items.length;i<len;i++){ var _d=items[i]; var _li='<li> <span>{{DV}}</span><span>{{DK}}</span></li>'; _ul.append(_li.replace(/{{DV}}/g, _d.val).replace(/{{DK}}/g,_d.name).replace(/{{DC}}/g,p.indexOf(_d.val.toString())>-1?'dd-item on':'dd-item')); } _panel.find('.dd-item').click(function(e){ var $this=$(this); var _k_= $this.find('.dd-k:eq(0)').text() var _v_= $this.find('.dd-v:eq(0)').text(); if($this.hasClass('on')){ parm=parm.filter(function(t){ return t!=_v_; }); $this.removeClass('on'); }else{ parm.push(_v_); $this.addClass('on'); } var disArr=[]; for(var i=0,len=items.length;i<len;i++){ var _d=items[i]; if(parm.indexOf(_d.val.toString())>-1) disArr.push(_d.name); } $(".iptdiplay").val(disArr.join('|')); }); }; //init to build dropdown items createDropItems(opts.items||[]); function toggleDrop(){ $(".dropdown-panel").slideToggle(); }; //search $(".iptsearch").bind("input propertychange",function(e){ if(!e) return; var _sk=e.currentTarget.value; var _items=opts.items||[]; createDropItems(_items.filter(function(d){ return d.name.indexOf(_sk)>-1; }),parm); }); //Toggle dropdown $(".dropdown-display").click(function(){ toggleDrop(); }); //OK button event $(".dropdown-opt button.ok").click(function(){ toggleDrop(); okFn&&okFn.apply(this,[parm]); }); //Cancel button event $(".dropdown-opt button.cancel").click(function(){ toggleDrop(); cancelFn&&cancelFn.call(this); }); }; $.fn[_pluginName] = function (options,okFn,cancelFn) { var options = $.extend(defaults, options); return this.each(function () { init(this,options,okFn,cancelFn); }); } })(jQuery,window,document);
4.页面调用示例
<script> var data=[ { name:'http://58.100.3.12',val:1 }, { name:'http://44.168.4.13',val:2 }, { name:'http://192.168.2.1/sdfsf/234234/234/2/34/23',val:3 }, { name:'http://220.199.5.14',val:4 }, { name:'http://127.1.62.15',val:5 }, { name:'http://127.1.62.15',val:6 }, { name:'http://127.1.62.15',val:7 }, { name:'http://127.1.62.15',val:8 }, { name:'http://127.1.62.15',val:9 }, { name:'http://127.1.62.15',val:10 }, { name:'http://127.1.62.15',val:11 }, { name:'http://127.1.62.15',val:12 }, { name:'http://127.1.62.15',val:13 }, { name:'http://127.1.62.15',val:14}, { name:'http://127.1.62.15',val:15 }, { name:'http://127.1.62.15',val:16 }, { name:'http://127.1.62.15',val:17 }, { name:'http://127.1.62.15',val:18 }, { name:'http://127.1.62.15',val:19 }, { name:'http://127.1.62.15',val:20 }, { name:'http://127.1.62.15',val:21 }, { name:'http://127.1.62.15',val:22 }, { name:'http://127.1.62.15',val:23 }, { name:'http://127.1.62.15',val:24 }, { name:'http://127.1.62.15',val:25 }, { name:'http://127.1.62.15',val:26 }, { name:'http://127.1.62.15',val:27 }, { name:'http://127.1.62.15',val:28 }, { name:'http://127.1.62.15',val:29 } ]; $("#demo").jqDropdown({ items:data },function(e){ console.dir(e); },function(){ console.log('canceled by user !'); }); </script>
5.输出
6.不足
页面样式在不支持css3浏览器中显示有问题 后期需要改进
下拉数据为一次性渲染 如有需要 可设置滚动加载
下拉框滚动条的美化未兼容所有浏览器
搜索时检索数据直接源自页面数据 所有需要添加延迟处理 获取服务端数据