前言
2017年给自己定了120篇的博客的目标,任务有点艰巨,趁着过年回家闲着写点插件,把自己的想法实现的同时,同时让自己写代码更加的顺溜。言归正传:为什么要实现这个下拉的选项的功能呢,其实它的应用非常的广泛
- 实时的从通过搜索将复合的数据给求出来,如搜索等(这种是可以自己输入的类型)如12306的车站的选择(这种是只能选择搜出的内容)
- 多选的功能,虽然select提供了multiple的功能,但是在web端中的显示非常的丑陋
- web端中的下拉select可以实现选择的功能,但是在web端option的样式难以设置,显现出来不和谐
插件打算实现以下条件
- 数据方面,分实时数据和固定数据(固定数据,实时数据)
- 事件触发的控制(click,mouseenter等)
- 强制选择搜出的内容或者可以自己手动填写
- 关键字的加粗(待确定)
- 下拉的选项框的宽度是跟随输入框的宽度超出的部分...,还是选项的长度自动设置下拉框的
- 下拉框选取前面的几项还是全部显示
此插件还未开发结束
/** * @param {Object} opt 参数描述 * opt.id {string} * state分为button和input类型,如是button的类型可以搭配title来设置 * data下拉选项的数据 * triggerType触发事件的事件 * clickFill表示点击填充 * maxlength表示数据的最长长度 * keyupSearch点击直接检索数据 * multiple表示是否可以多选 */ function downDrop(opt) { this.id=opt.id; this.width=opt.width||200; this.El=document.getElementById(opt.id); this.state=opt.state||"button"; this.titleButton=opt.title; this.data=opt.data; this.triggerType=opt.triggerType||"click"; this.clickFill=opt.clickFill||false; this.maxlength=opt.maxlength||opt.data.length; this.keyupSearch=opt.keyupSearch||false;//true||false this.multiple=opt.multiple||false; this._init(); } downDrop.prototype={ _init:function () { this.format(); this.attachEvent(); }, format:function () { var head="",html=""; if (this.state =="button"){ var div=document.createElement('input'); div.className="dropbutton"; div.type="button"; div.value=''+this.titleButton; div.style.width = this.width+'px'; this.El.appendChild(div); }else{ var input=document.createElement('input'); input.className="dropbutton"; input.value=""; input.style.width = this.width+'px'; this.El.appendChild(input); } var div=document.createElement('div'); div.style.display="none"; html+='<ul>'; if (this.multiple){ for (var i = 0, l = this.data.length; i < l; i++) { html += '<li value="' + this.data[i].id + '"><input type="checkbox" data-value="'+this.data[i].id +'"/>' + this.data[i].text + '</li>'; } }else { for (var i = 0, l = this.data.length; i < l; i++) { html += '<li value="' + this.data[i].id + '">' + this.data[i].text + '</li>'; } } html+='</ul>'; div.innerHTML =html; this.El.appendChild(div); if (this.multiple){ var submit=document.createElement('div'); submit.innerHTML="<input class='downropno' type='button' value='取消'/><input class='downropyes' type='button' value='确定'/>" div.appendChild(submit); } }, attachEvent:function () { var self=this; var el=this.El.firstChild; if (this.triggerType=="click"){ this.addEventlister(el, "click",handle) }else if (this.triggerType=="mouseenter"){ this.addEventlister(el,'mouseenter',handle) }else { this.addEventlister(el,'focus',focusHandle); } this.addEventlister(el,'keypress',keyupHandle); function focusHandle(e) { window.event? window.event.cancelBubble = true : e.stopPropagation(); if (self.El.getElementsByTagName('div')[0].style.display=="none") self.El.getElementsByTagName('div')[0].style.display="block"; self.addEventlister(el,'keyup',keyupHandle); } function keyupHandle(e) { self.El.getElementsByTagName('div')[0].style.display="block"; var html=""; el.setAttribute('data-value',""); /*可以数据接口*/ if (self.keyupSearch) { self.data = [{id: 1, text: 'bbb'}]; html+='<ul>'; if (self.multiple){ for (var i = 0, l = self.data.length; i < l; i++) { html += '<li value="' + self.data[i].id + '"><input type="checkbox" data-value="'+self.data[i].id +'"/>' + self.data[i].text + '</li>'; } }else { for (var i = 0, l = self.data.length; i < l; i++) { html += '<li value="' + self.data[i].id + '">' + self.data[i].text + '</li>'; } } html+='</ul>'; if (self.multiple){ html+="<div><input class='downropno' type='button' value='取消'/><input class='downropyes' type='button' value='确定'/></div>" } self.El.getElementsByTagName('div')[0].innerHTML = html; self.attachEvent(); } } function handle(e){ window.event? window.event.cancelBubble = true : e.stopPropagation(); window.event? window.event.returnValue = false : e.preventDefault(); if (self.El.getElementsByTagName('div')[0].style.display=="none") self.El.getElementsByTagName('div')[0].style.display="block"; else{ self.El.getElementsByTagName('div')[0].style.display="none"; } } var lis=self.El.getElementsByTagName('div')[0].getElementsByTagName('li'); for (var li=0,lislength=lis.length;li<lislength;li++){ lis[li].onclick=function(e){ if (!self.multiple){ window.event ? window.event.cancelBubble = true : e.stopPropagation(); window.event ? window.event.returnValue = false : e.preventDefault(); if (el.innerHTML) { el.innerHTML = '' + this.innerHTML; } else { el.value = this.innerHTML; el.setAttribute('data-value', el.value); } self.El.getElementsByTagName('div')[0].style.display = "none"; } } } if(this.multiple) { var checkbox = self.El.getElementsByTagName('div')[0].getElementsByTagName('ul')[0].getElementsByTagName('input'); var checkArr = []; var yesArr=[]; for (var check = 0, checkboxL = checkbox.length; check < checkboxL; check++) { checkbox[check].onclick = function () { var value = this.getAttribute('data-value'); if (checkArr.indexOf(value) < 0) { checkArr.push(value) } else { var index = checkArr.indexOf(value); checkArr.splice(index, 1) } } } var no=self.El.getElementsByTagName('div')[1].getElementsByTagName('input')[0]; var yes=self.El.getElementsByTagName('div')[1].getElementsByTagName('input')[1]; no.onclick=function () { if(yesArr.length>0){ for (var check = 0, checkboxL = checkbox.length; check < checkboxL; check++) { checkbox[check].checked = false; } for(var m=0;m<yesArr.length;m++){ for (var check = 0, checkboxL = checkbox.length; check < checkboxL; check++) { if ( checkbox[check].getAttribute('data-value')==yesArr[m]){ checkbox[check].checked=true; break ; } } } }else { for (var check = 0, checkboxL = checkbox.length; check < checkboxL; check++) { checkbox[check].checked = false; checkArr = []; yesArr=[]; } } checkArr=yesArr; self.El.getElementsByTagName('div')[0].style.display = "none"; } yes.onclick=function () { if (!self.clickFill) { if (!el.innerHTML) { el.value = checkArr.join(','); self.El.getElementsByTagName('div')[0].style.display = "none"; yesArr=checkArr.join(',').split(','); } } } } document.body.onclick=function () { if (self.multiple) { return } else { if (!self.clickFill) { if (!el.innerHTML) { if (el.getAttribute('data-value')) { el.value = el.getAttribute('data-value'); } else { el.value = ""; } self.El.getElementsByTagName('div')[0].style.display = "none"; } } } } }, addEventlister:function (el,type,func){ if (el.addEventListener){ el.addEventListener(type, func,false) }else{ el.attachEvent("on"+type, func) } } }