下拉选项插件的实现

前言

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)
        }
    }
}

posted @ 2017-01-25 13:46 莺哥阅读(216) 评论(0) 收藏举报

刷新页面返回顶部

犹记惊鸿照影（JS）

下拉选项插件的实现

前言

插件打算实现以下条件

公告