js实现具有联动和搜索功能的combobox

/** * 以下的功能是创建下拉框 * author：yd_lemon * datetime：2018-05-10 15:50 Create */ (function ($) { //#region 定义 var _ParentArray = [];//暂存层级关系数组 var CachArry = [];//缓存数组 //#endregion //#region 初始化 /** * 初始化 * @param element 元素 例如传 $(this) * @param options 传递参数 * @constructor */ var ComboBox = function (element, options) { this.element = element; //请求链接地址 this.arr = options.arr; //回调函数 this.callback = options.callback || function () { }; //返回创建的class，方便再次数据动态创建使用 this.returnclass = options.returnclass || function () { }; //创建 this.CreateComboBox(this.arr, this.element); }; // #endregion //#region 创建下拉选项框 /** * 创建下拉选项框 * @param jsonarr 数据源数组 * @param element 新增元素位置 * @constructor */ ComboBox.prototype.CreateComboBox = function (jsonarr, element) { var self = this;//传递全局参数 //#region 创建下拉框 var _SelectClass = new Date().getTime(); _SelectClass = 'S' + _SelectClass; var _Select = $('' + '<div class="selectinf ' + _SelectClass + '" data-open=0>\n' + ' <div class="text-contents"></div>\n' + ' <div class="down-up down"></div>\n' + '</div>'); element.append(_Select); var _ComboboxClass = new Date().getTime(); _ComboboxClass = 'C' + _ComboboxClass; var _Combobox = $('' + '<div class="combobox ' + _ComboboxClass + '">\n' + ' <div class="search">\n' + ' <input type="text" class="search-text" placeholder="输入关键词搜索"/>\n' + ' <span class="fa fa-search search-btn"></span>\n' + ' </div>\n' + ' <div class="main"><ul class="navMenu"></ul></div>\n' + '</div>'); $("body").append(_Combobox); self.returnclass(_SelectClass, _ComboboxClass); //#endregion //#region 输入框绑定焦点事件 $("." + _ComboboxClass).delegate("input", "blur", function () { $(this).parent().css("border", "1px silver solid"); }); $("." + _ComboboxClass).delegate("input", "focus", function () { $(this).parent().css("border", "1px #0B7CED solid"); }); //#endregion //#region 输入框绑定键盘事件及文本改变事件 $("." + _ComboboxClass).delegate("input", "input", function () {//文本输入框 if ($(this).val() == "") { $('.' + _ComboboxClass + ' .main .navMenu').find("li").css("display", "block"); } }); $("." + _ComboboxClass).delegate("span", "click", function () {//搜索按钮 var e = jQuery.Event("keypress");//模拟一个键盘事件 e.keyCode = 13;//keyCode=13是回车 $("." + _ComboboxClass + " .search .search-text").trigger(e); }); $("." + _ComboboxClass).delegate("input", "keypress", function (event) { if (event.keyCode == "13") { var txt = $(this).val().toLowerCase(); if (txt == "") return;//为空不执行 var arr = ProcessingArray(txt, CachArry); if (arr.length > 0) { _ParentArray = []; $(arr).each(function (index, item) { var obj = { ID: item.ID, ParentId: item.ParentId, Name: item.Name, IsSelect: item.IsSelect, } _ParentArray.push(obj); if (item.ParentId == "-1") { return true; } SelectParentArray(CachArry, item.ParentId); }) } $('.' + _ComboboxClass + ' .main .navMenu').find("li").css("display", "none"); if (_ParentArray.length > 0) { _ParentArray.map(function (item) { $('.' + _ComboboxClass + ' .main .navMenu .' + item.ID).css("display", "block"); }) } } }) //#endregion //#region 设置初始化位置、高度和宽度 var width = element.outerWidth() - 8; var height = element.outerHeight(); height = height >= 23 ? 23 : height; $('.' + _SelectClass).css({ 'width': width, 'height': height, 'top': '-2px' }); $('.' + _SelectClass + ' .text-contents').css({ 'height': height }); //#endregion //#region 点击正常显示框展开和收缩 $('.' + _SelectClass).bind('click', function () {//绑定点击事件 var IsOpen = $('.' + _SelectClass).data("open"); if (IsOpen == 0) { $('.' + _SelectClass).data("open", 1); $('.' + _SelectClass + ' .down-up').removeClass("down").addClass("up"); $('.' + _ComboboxClass).css({ 'top': $('.' + _SelectClass).offset().top + $('.' + _SelectClass).height() + 3, 'left': $('.' + _SelectClass).offset().left, }).slideDown(300); } else { $('.' + _SelectClass).data("open", 0); $('.' + _SelectClass + ' .down-up').removeClass("up").addClass("down"); $('.' + _ComboboxClass).slideUp(300); } }); //#endregion //#region 判断点击事件是否指定区域 $(document).click(function (e) { e = window.event || e; // 兼容IE7 obj = $(e.srcElement || e.target); if (!($(obj).is("." + _SelectClass + ",." + _SelectClass + " *")) && !($(obj).is("." + _ComboboxClass + ",." + _ComboboxClass + " *")) ) { $('.' + _SelectClass).data("open", 0); $('.' + _SelectClass + ' .down-up').removeClass("up").addClass("down"); $('.' + _ComboboxClass).slideUp(300); } }); //#endregion //下拉框信息创建 $.DropDownBox(jsonarr, _ComboboxClass, _SelectClass, self.callback, element); } //#endregion //#region 创建子集节点 /** * 创建子集节点 * @param submenu 子集元素集合 * @param lihtml li项 * @param textwidth 计算宽度 * @param array 缓存数组 * @constructor */ CreateSubMenu = function (submenu, lihtml, textwidth, array) { var subUl = $("<ul class='sub-menu' style='display: none'></ul>"), callee = arguments.callee, subLi; $(submenu).each(function (index, item) { var obj = { ID: item.ID, ParentId: item.ParentId, Name: item.Name, IsSelect: item.IsSelect, } array.push(obj); var _width = $.getTextWidth(item.Name);//获取文字的宽度 textwidth = textwidth >= _width ? textwidth : _width;//判断宽度最大 var url = item.url || "javascript:;"; subLi = $("<li class='" + item.ID + "' data-id='" + item.ID + "' data-parentId='" + item.ParentId + "' data-select='" + item.IsSelect + "'><a href='" + url + "' target='_blank'><span class='title'>" + item.Name + "</span></a></li>");