刚封装的基于jquery的一个简单的、可过滤可添加的下拉框控件

项目里有这种需求，好多页面都有用到，所以干脆封装一个控件。

直接代码：

    var my_Select = function (containner, data, changeFun, addUrl) {
        if ($('#my_select_style').length < 1) {
            $('head').append(
                '<style id="my_select_style">'
                + '    .my_select {position:relative;width:150px;font-size:12px;}'
                + '    .my_select_txt {width:130px;height:30px;padding-right:20px;border:1px solid #999;}'
                + '    .my_select_btn {width:20px;height:28px;position:absolute;top:1px;right:1px;border:none;}'
                + '    .my_select_add {width:24px;height:24px;line-height:20px;border:none;border-radius:50%;background-color:#bbb;font-size:34px;color:#fff;position:absolute;top:4px;right:-32px;}'
                + '    .my_select_btn:after{content:"";display:block;position:absolute;top:13px;width:0;height:0;right:3px;border-right:5px solid transparent;border-top:5px solid #999;border-left:5px solid transparent;}'
                + '    .my_select_slt {border:1px solid #999;position:absolute;top:33px;left:0px;min-width:60%;display:none;}'
                + '    .my_select_opt {width:100%;overflow:hidden;}'
                + '</style>'
            );
        }
        var slt = this, 
            frmDom = $('<div   class="my_select"></div>').appendTo(containner),
            btnDom = $('<div   class="my_select_btn"></div>').appendTo(frmDom),
            addDom = $('<div   class="my_select_add">+</div>').appendTo(frmDom),
            sltDom = $('<div   class="my_select_slt"></div>').appendTo(frmDom),
            txtDom = $('<input class="my_select_txt" type="text" />').appendTo(frmDom);
        slt.value = '';
        slt.text = '';
        slt.changeCallback = changeFun;
        slt.bindData = function (dt) {
            sltDom.html('');
            if (dt) {
                for (var i = 0; i < dt.length; i++) {
                    var d = dt[i];
                    if (d.select) {
                        this.text = d.text;
                        this.value = d.value;
                        txtDom.val(d.text);
                    }
                    sltDom.append('<div class="my_select_opt" value="' + d.value + '">' + d.text + '</div>');
                }
            }
        };
        containner.on('click', function (e) {
            e = e || window.event;
            var t = e.srcElement || e.target, d = $(t), o = $(this);
            $('.my_select_slt').hide();
            if (d.hasClass('my_select_txt')) {
                $('.my_select_opt').show();
                o.find('.my_select_slt').show();
            } else if (d.hasClass('my_select_btn')) {
                $('.my_select_opt').show();
                o.find('.my_select_slt').show();
            } else if (d.hasClass('my_select_opt')) {
                slt.text = $(t).html();
                slt.value = $(t).attr('value');
                o.find('.my_select_txt').val(slt.text);
                slt.changeCallback(slt.value, slt.text);
            } else if (d.hasClass('my_select_add')) {
                slt.text = o.find('.my_select_txt').val(), exist = false, list = o.find('.my_select_opt');
                list.each(function (i, item) {
                    if ($(item).html() == slt.text) {
                        exist = true;
                        return;
                    }
                });
                if (!exist) {
                    ajaxPost(addUrl, { 'text': text }, function (re) {
                        slt.value = re;
                        $('<div class="my_select_opt" value="' + slt.value + '">' + slt.text + '</div>').insertBefore(list.first());
                        list.show();
                    });
                }
                $('.my_select_opt').show();
                o.find('.my_select_slt').show();
            }
        }).on('keyup', '.my_select_txt', function (e) {
            var txt = $(this).val(), items = $(this).parent().find('.my_select_opt');
            if (slt.text != txt) {
                slt.text = '';
                slt.value = '';
            }
            items.each(function (i, item) {
                if ($(item).html().indexOf(txt) != -1) {
                    $(item).show();
                } else {
                    $(item).hide();
                }
            });
        })
        slt.bindData(data);
    };
    $.fn.Load_my_Select = function (data, changeFun, addUrl) {
        return new my_Select($(this), data, changeFun, addUrl);
    };
    //* 调用方法举例
    var addUrl = '/Base/AddItem'; //添加条目调用的接口url
    var dt = [
        { value: 1, text: 'test 1' },
        { value: 2, text: 'test 2', select: true },
        { value: 3, text: 'test 3' },
        { value: 4, text: 'test 4' }
    ];
    var dt1 = [
        { value: 1, text: 'asdf 1' },
        { value: 2, text: 'asdf 2', select: true },
        { value: 3, text: 'asdf 3' },
        { value: 4, text: 'asdf 4' }
    ];
    var sltObj = $('#frame').Load_my_Select(dt, function (value, text) {
        alert('value:' + value + '|text:' + text);//这里是通过change事件的回调方法取值
    }, addUrl);
    var sltObj1 = $('#frame1').Load_my_Select(dt1, function (value, text) {
        alert('value:' + value + '|text:' + text);//这里是通过change事件的回调方法取值
    }, addUrl);
    //下面是通过对象取值
    var v = sltObj.value, t = sltObj.text;
    //重新绑定数据
    sltObj.bindData(dt1);
    sltObj1.bindData(dt);