刚封装的基于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);