下拉控件jQuery插件

由于后端开发需要一个下拉控件，能输入，能选择，于是自己写了一个

;(function($,window,document,undefined){
    function Select(el,opt){
        this.$el = el;
        this.default={
            title:'选择类别',
            showTitle:true,
            wth:'',// ''100%，half:50%,third:30%
            require:true,
            items:[{
                id:"01",
                contxt:'项目一'
            },{
                id:"02",
                contxt:'项目二'
            }]
        }
        this.settings = $.extend({},this.default,opt);
    }
    Select.prototype={
        init:function(){
            var that = this,
                $html=$('<div class="title"><span class="eis-require">*</span>\n'+
                        that.settings.title+
                    '</div>\n'+
                '<div class="es-input-wrapper">\n' +
                '                <div class="input-box">\n' +
                '                   <input type="text" value="" placeholder="'+that.settings.title+'">\n'+
                '<i class="fa fa-angle-down"></i>\n' +
                '<ul class="eis-new-form-dropmenu"></ul>'+
                '                 </div>\n' +
                '            </div>');
            that.$el.append($html);
            var $list=that.$el.find('.eis-new-form-dropmenu'),
                $require = that.$el.find('.eis-require'),
                $input = that.$el.find('input[type="text"]'),
                $title=that.$el.find('.title'),
                $inputWrapper=that.$el.find('.es-input-wrapper');
            //判断显示标题
            if(that.settings.showTitle===false){
                $title.remove()
                $inputWrapper.css({'margin-left':"0"})
            }else{
                $inputWrapper.css({'margin-left':"100"})
            }
            if(!that.$el.hasClass('es-form-group')){
                that.$el.addClass('es-form-group')
            }
            switch (that.settings.wth){
                case '':
                    break
                case 'half':
                        that.$el.addClass('half');
                    break;
                case 'third':
                    that.$el.addClass('third')
            }
            // 添加下拉列表
            var $listHtml = '';
            if(that.settings.items && that.settings.items.length>0){
               for(var i = 0;i<that.settings.items.length;i++){
                   $listHtml+='<li class="eis-dropmenu-item">'+that.settings.items[i]['contxt']+'</li>'
               }
               $list.html($listHtml)
            }
            //判断显示必填
            if(that.settings.require){
                $require.text('*')
            }else(
                $require.text('')
            )
            //下拉展示收缩
            var $dropToggle = that.$el.find('.fa');
            $dropToggle.on('click',function(e){
                if(e){
                    e.stopPropagation();
                }else{
                    window.event.cancelBubble=true
                }
                if($(this).get(0).style['transform']==''){
                    $(this).get(0).style['transform']='translate(0,-50%) rotate(180deg)';
                }else if( $(this).get(0).style['transform']==='translate(0px, -50%) rotate(180deg)'){
                    $(this).get(0).style['transform']='translate(0,-50%) rotate(0deg)';
                }else{
                    $(this).get(0).style['transform']='translate(0,-50%) rotate(180deg)'
                }
                $list.slideToggle()
            })
            var $listItem = $list.find('.eis-dropmenu-item');
            $listItem.each(function(){
                $(this).on('click',function(e){
                    if(e){
                        e.stopPropagation();
                    }else{
                        window.event.cancelBubble=true
                    }
                    $input.val('');
                    $input.val($(this).text())
                    $list.slideToggle()
                })
            })
            $(document).on('click',function(){
                $list.hide();
            })
        }
    }
    $.fn.extend({
        select:function(opt){
            return this.each(function(){
                new Select($(this),opt).init()
            })
        }
    })
})(jQuery,window,document)

外部调用

$(function(){
$('#select').select({
title:'联系人',//标题
wth:'half',// ''100%，half:50%,third:30%
require:true,//true,显示红*，false不显示
showTitle:false,//是否显示标题
//item数据
items:[{
id:"01",
contxt:'项目一'
},{
id:"02",
contxt:'项目二'
}]
})
})