可选可搜也可输入的单选下拉列表

//可选可搜也可输入的单选下拉列表
//使用方法：
/*
        var employees = [
            {
                'Value': '111111',
                'Text': 'AAAAAA'
            },
            {
                'Value': '122222',
                'Text': 'BBBBBB'
            }
        ];
        var selectedItem = [
            {
                'Value': '111111',
                'Text': 'AAAAAA'
            }
        ];

        $("#displayAreaText").searchableDropdownList(
            $('#meetingConfereesTemp'),
            $('#displayAreaText'),
            employees,
            selectedItem);

 */


;
(function ($, window, document, undefined) {

    //定义构造函数
    var SearchableDropdownList = function (
        attachToControl
        , valueTextBox
        , displayAreaText
        , data
        , selectedItem
        , options) {

        this.$valueTextBox = valueTextBox;
        this.$displayAreaText = displayAreaText;
        this.$attachToControl = attachToControl;
        this.$wrap = {};
        this.$dropDownContainer = {};
        this.$list = {};
        this.id = "";
        this.selectedItemText = '';
        this.selectedItemValue = '';
        this.selectedItem = selectedItem;
        this.data = data;

        this.defaults = {
            'container': '<div class="phoenixDropDownList-container"></div>',
            'list': '<div class="phoenixDropDownList-list"></div>'
        };
        this.options = $.extend({}, this.defaults, options);
    };


    //定义原型方法
    SearchableDropdownList.prototype = {
        //初始化
        init: function () {
            var that = this;
            this.id = this.getGuid();

            this.$valueTextBox.val('');
            this.$displayAreaText.val('');

            //为选定对象添加包裹
            this.$attachToControl.wrap('<div class="phoenixDropDownList-wrap" id="' + this.id + '"></div>');
            this.$wrap = this.$attachToControl.parent();

            //添加下拉列表容器
            this.$wrap.append(this.defaults.container);
            this.$dropDownContainer = this.$attachToControl.next();
            this.$dropDownContainer.css('top', this.$attachToControl.outerHeight(true));
            this.$dropDownContainer.css('width', this.$attachToControl.outerWidth(true));
            this.$dropDownContainer.css('left', 0);

            //添加下拉列表
            this.$dropDownContainer.append(this.defaults.list);
            this.$list = $(this.$dropDownContainer.children("div").get(0));


            //添加下拉选项
            if (this.data != null && this.data != 'undefined') {
                for (var i = 0; i < this.data.length; i++) {
                    this.$list.append(
                        '<div class="checkbox">'
                        + '<label>'
                        + this.data[i].Text
                        + '</label>'
                        + '</div>');

                }
            }


            //设置隐藏
            this.$dropDownContainer.hide();

            //设置事件
            this.$attachToControl.click(function () {
                that.$dropDownContainer.css('z-index', '9999');
                that.$dropDownContainer.show();
            });

            //搜索框内容改变时
            this.$attachToControl.on("input propertychange", function () {
                that.$list.find("div:contains(" + that.$attachToControl.val() + ")").show();
                that.$list.find("div:not(:contains(" + that.$attachToControl.val() + "))").hide();
            });


            //选定某个项目时
            this.$list.find("label").click(function (e) {
                var $e = $(e.currentTarget);
                that.selectedItemValue = ($e.val());
                that.selectedItemText = ($e.parent().text());

                that.$valueTextBox.val(that.selectedItemValue);
                that.$displayAreaText.val(that.selectedItemText);
                that.$displayAreaText.trigger('change');
            });

            //在下拉列表之外点击时隐藏
            $(document).on('click', function (event) {
                var evt = event.srcElement ? event.srcElement : event.target;
                evt = $(evt);
                var parents = evt.parents();

                var result = $.grep(parents,
                    function (e) {
                        return e.id == that.id;
                    });
                if (result.length <= 0) {
                    that.$dropDownContainer.hide();
                }
            });

            //设置初始勾选状态
            this.setSelectedItem(this.selectedItem);

            return this;
        },
        //重新初始化
        reInit: function () {
            var that = this;

            //添加下拉列表
            this.$dropDownContainer.empty();
            this.$dropDownContainer.append(this.defaults.list);
            this.$list = $(this.$dropDownContainer.children("div").get(0));
            this.$list.empty();

            //添加下拉选项
            if (this.data != null && this.data != 'undefined') {
                for (var i = 0; i < this.data.length; i++) {
                    this.$list.append(
                        '<div class="checkbox">'
                        + '<label>'
                        + this.data[i].Text
                        + '</label>'
                        + '</div>');

                }
            }


            //选定某个项目时
            this.$list.find("label").click(function (e) {
                var $e = $(e.currentTarget);
                that.selectedItemValue = ($e.val());
                that.selectedItemText = ($e.parent().text());

                that.$valueTextBox.val(that.selectedItemValue);
                that.$displayAreaText.val(that.selectedItemText);
                that.$displayAreaText.trigger('change');
            });

            //设置初始勾选状态
            this.setSelectedItem(this.selectedItem);
            return this;
        },
        getGuid: function () {
            var rtStr = String.fromCharCode(65 + Math.floor(Math.random() * 26));
            for (var i = 0; i < 31; ++i) {
                var num = Math.floor(Math.random() * (26 + 26 + 10));
                var chStr;
                if (num < 10) {
                    chStr = num.toString();
                }
                else if (num < 10 + 26) {
                    chStr = String.fromCharCode(65 + num - 10);
                }
                else {
                    chStr = String.fromCharCode(97 + num - 10 - 26);
                }
                rtStr += chStr;
            }
            return rtStr;
        },
        setSelectedItem: function (item) {
            //清空旧数据
            this.selectedItemValue = '';
            this.selectedItemText = '';
            this.selectedItem = item;

            if (this.selectedItem != null && this.selectedItem != 'undefined') {

                this.selectedItemValue = this.selectedItem.Value;
                this.selectedItemText = this.selectedItem.Text;

            }
            this.$valueTextBox.val(this.selectedItemValue);
            this.checkSelectedItem();
            this.$displayAreaText.trigger('change');
        },
        checkSelectedItem: function () {
            this.$displayAreaText.val(this.selectedItemText);
        },
        //置顶元素
        topItem: function (itemValueToTop) {
            if (itemValueToTop == null || itemValueToTop == 'undefined') {
                return;
            }
            //全部
            var firstItem = this.$list.children().first();
            if (firstItem == null || firstItem == 'undefined') {
                return;
            }

            var item = this.$list.find('[value="' + itemValueToTop + '"]');

            if (item == null || item == 'undefined' || item.length == 0 || item == firstItem) {
                return;
            }
            firstItem.before(item);
        }
    };

    //加入到jquery扩展
    $.fn.searchableDropdownList = function (valueTextBox, displayAreaText, data, selectedItem, options) {
        //创建实例
        var dropDownList = new SearchableDropdownList(this, valueTextBox, displayAreaText, data, selectedItem, options);
        var temp = dropDownList.init();
        this.dropDownList = temp;
        $(this).data('dropDownList', temp);
        return temp;
    };
})(jQuery, window, document);

 

    .phoenixDropDownList-wrap {
        position: relative;
    }

    .phoenixDropDownList-container {
        border: solid gainsboro thin;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: rgb(255, 255, 255);
        max-width: 280px;
    }

    .phoenixDropDownList-list {
        padding: 5px;
        background-color: rgb(255, 255, 255);
        max-height: 400px;
        overflow: auto;
    }

 

.searchable-select-hide {
  display: none;
}
 
.searchable-select {
  display: inline-block;
  min-width: 130px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
  vertical-align: middle;
  position: relative;
  outline: none;  
}
 
.searchable-select-holder{
  padding: 2px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 2px;
  min-height: 18px;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
 
.searchable-select-caret {
  position: absolute;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border-color: black transparent transparent transparent;
  top: 0;
  bottom: 0;
  border-style: solid;
  border-width: 5px;
  margin: auto;
  right: 10px;
}
 
.searchable-select-dropdown {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 4px;
  border-top: none;
  top: 28px;
  left: 0;
  right: 0;
}
 
.searchable-select-input {
  margin-top: 5px;
  border: 1px solid #ccc;
  outline: none;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
  width: 100%;
}
 
.searchable-scroll {
  margin-top: 4px;
  position: relative;
}
 
.searchable-scroll.has-privious {
  padding-top: 16px;
}
 
.searchable-scroll.has-next {
  padding-bottom: 16px;
}
 
.searchable-has-privious {
  top: 0;
}
 
.searchable-has-next {
  bottom: 0;
}
 
.searchable-has-privious, .searchable-has-next {
  height: 16px;
  left: 0;
  right: 0;
  position: absolute;
  text-align: center;
  z-index: 10;
  background-color: white;
  line-height: 8px;
  cursor: pointer;
}
 
.searchable-select-items {
  max-height: 400px;
  overflow-y: scroll;
  position: relative;
}
 
.searchable-select-items::-webkit-scrollbar {
  display: none;
}
 
.searchable-select-item {
  padding: 5px 5px;
  cursor: pointer;
  min-height: 30px;
  box-sizing: border-box;
    transition: all 1s ease 0s;
}
 
.searchable-select-item.hover {
 
  background: #555;
  color: white;
}
 
.searchable-select-item.selected {
  background: #28a4c9;
  color: white;
}