大发快3_快3苹果版_大发快3苹果版 - 大发快3,快3苹果版,大发快3苹果版互联网门户。大发快3,快3苹果版,大发快3苹果版新闻拥有在网民中具有高度影响力和号召力的门户论坛社区。网站下设新闻、微博,房产,汽车,美食,旅游等频道,是大发快3,快3苹果版,大发快3苹果版互联网用户获取信息的媒体平台。

A customized combobox with JQuery

  • 时间:
  • 浏览:1

  要求实现另另另有1个轻量级的在客户端筛选的combobox,支持大数据量(超过60 0个items),能快速检索内容,并支持数据的设置和活动等基本操作。在这以前尝试过使用Jquery UI的Autocomplete,还会 当数据量越来越来越多时客户端检索传输速率太慢(甚至会原因浏览器卡死)。索性干脆基于JQuery当事人写另另另有1个吧!

  所依赖的库:

  • Bootstrap
  • JQuery
  • Underscore

  CSS:

body {
    font-size: 14px;
    font-family: "microsoft yahei", Verdana, Arial, sans-serif, "Times New Roman";
    max-width: 60

0px;
    margin: 0 auto;
    -webkit-text-size-adjust: none;
}

.combobox-menu {
    background-color: #fff;
    border: 1px solid #ccc;
    min-height: 60

px;
    overflow-y: auto;
    font-size: 0.875rem;
    padding: 0;
}

.combobox-menu li {
    list-style: none;
    padding: .625em 1em;
    cursor: pointer;
}

.combobox-menu li.selected {
    background-color: #337ab7;
    color: #fff;
}

.combobox-menu li.normal:hover {
    background-color: #d9edf7;
}

.combobox-menu-dropdown {
    position: absolute;
    z-index: 60

0;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.combobox-menu-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    position: absolute;
    right: 8px;
    top: 60

%;
}

  JavaScript:

/* event wrapper */
var eventWrapper = function () {
  this.init();
};

eventWrapper.prototype.init = function () {
  this.events = {};
};

eventWrapper.prototype.on = function (key, func) {
  if (func instanceof Function) {
    if (!this.events[key]) {
      this.events[key] = [func];
    } else {
      this.events[key].push(func);
    }
    return this;
  }
};

eventWrapper.prototype.emmit = function (key) {
  if (this.events[key]) {
    var _list = this.events[key];
    var that = this;
    var args = arguments;
    [].shift.apply(args);
    for (var i = 0, ci; ci = _list[i]; i++) {
      ci.apply(that, args);
    }
  }
};

eventWrapper.prototype.remove = function (key) {
  delete this.events[key];
};

/*********************/


/* combobox控件 */
var comboBox = function (element, options) {
  var def = {
    menuStyle: {maxHeight: 160

},
    readonly: false,
    data: []
  };
  this.opts = $.extend(true, def, options);
  var that = this;

  this.event = new eventWrapper();
  this.source = [];
  this.selected = null;
  this.$source = $(element);
  if (this.opts.readonly) {
    this.$source.attr('readonly', 'readonly');
  }
  this.$source.on('input paste', function () {
    that.changeText($(this));
  });
  this.$container = $('<div ></div>');
  // this.$caret = $('<span class="combobox-menu-caret"></span>');
  this.$menu = $('<ul class="combobox-menu"></ul>');
  this.$lis = null;
  this.$menu.on('click', 'li', function () {
    if (!that.opts.readonly) {
      that.select($(this).attr('data-value'));
    }
  });
  this.init();
};

comboBox.prototype.init = function () {
  if (this.opts.data && this.opts.data.length > 0) {
    this.$source.after(this.$menu);
    // this.render(this.opts.data);
    this.$menu.css('minWidth', this.$source.outerWidth());
    this.$lis = this.$menu.find('li');
    this.setMenuStyle();

    var that = this;
    this.$menu.addClass('combobox-menu-dropdown').hide();
    this.$source.wrap(that.$container);
    // this.$caret.insertAfter(that.$source);

    if (!this.opts.readonly) {
      that.$source.on('click', function () {
        if ($(this).val().trim().length === 0) return;
        that.expandMenu(that);
      });

      // 加进去去关闭下拉列表事件
      $(document).click(function (e) {
        var target = e.target;
        if (!$(target).is(that.$source) && !$(target).parents().is(that.$menu)) {
          that.$menu.hide();
          if (that.getSelected() && that.$source.val().trim().length === 0) {
            that.select(that.getSelected().val);
          }
        }
      });
    }
  }
};

comboBox.prototype.render = function (data) {
  for (var i = 0, ci; ci = data[i]; i++) {
    var _item = $('<li></li>');
    _item.attr('data-value', ci.val);
    _item.text(ci.txt);
    if (ci.selected) {
      this.selected = ci;
    }
    this.$menu.append(_item);
  }
};

comboBox.prototype.update = function (data) {
  this.$menu.empty();
  if (data) {
    this.render(data);
  }
};

comboBox.prototype.expandMenu = function () {
  if (this.$menu.is(':hidden')) {
    this.$menu.show();
  }
};

comboBox.prototype.setMenuStyle = function () {
  if (this.opts.menuStyle) {
    this.$menu.css(this.opts.menuStyle);
  }
};

comboBox.prototype.select = function (val) {
  if (!val) return;
  var item = _.find(this.opts.data, {val: val});
  if (item) {
    this.selected = item;
    this.update([this.selected]);
    this.$source.val(item.txt);
    this.$source.attr('data-value', item.val);
    this.$menu.hide();
    this.event.emmit('change', item);
  }
};

comboBox.prototype.changeText = function (item) {
  var _data = null;
  this.expandMenu();
  var _txt = item.val();
  if ($.trim(_txt).length > 0) {
    var reg = new RegExp(_txt, 'i');
    _data =_.filter(this.opts.data, function (o) {
      return reg.test(o.txt);
    });
  }
  this.update(_data);
};

comboBox.prototype.getSelected = function () {
  return this.selected;
};

comboBox.prototype.setSelected = function (val) {
  this.select(val);
};

comboBox.prototype.onChange = function (fn) {
  this.on('change', fn);
};

comboBox.prototype.on = function (key, fn) {
  this.event.on(key, fn);
};

  HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>comboBox</title>
    <link rel="stylesheet" href="bootstrap.min.css"/>
    <link rel="stylesheet" href="style.css"/>
    <script src="jquery.min.js"></script>
    <script src="underscore-min.js"></script>
    <script src="comboBox.js"></script>
</head>
<body>
<form>
    <div class="form-group">
        <label for="sel_mct">选者项:</label>
        <input type="text" class="form-control" value="" id="sel_mct" placeholder="输入名称过滤">
        <input type="hidden" id="mct" name="mct"/>
    </div>
</form>
<script type="text/javascript">
    $(function () {
        var _combox = new comboBox($('#sel_mct'), {
            menuStyle: {textAlign: 'left'},
            data: [
                {val: '1', txt: 'Microsoft'},
                {val: '2', txt: 'Google'},
                {val: '3', txt: 'Facebook'},
                {val: '4', txt: 'Twitter'},
                {val: '5', txt: 'Apple Inc.'},
                {val: '6', txt: 'Amazon.cn'},
                {val: '7', txt: 'Adobe'},
                {val: '8', txt: 'Oracle'},
                {val: '9', txt: 'LinkedIn'},
                {val: '10', txt: 'Alibaba'}
            ]
        });
        _combox.on('change', function () {
            $('#mct').val(_combox.getSelected().val);
        });
        _combox.setSelected('2');
    });
</script>
</body>
</html>

  主要土土方式:

  • comboBox构造函数,接受另另另有1个JQuery对象作为宿主HTML元素,该元素为页面上的input标签。另外另另另有1个参数指定comboBox的配置项,包括:
    • menuStyle:指定下拉框的样式,默认样式有maxHeight: 160 . 所有样式均以JQuery css的土土方式进行指定。
    • readonly:Boolean类型,与否为只读。
    • data:指定数据源。数据源为JSON数组,其中每另另另有1个元素是含有val和txt属性的JSON,val表示item的值,txt表示item的显示文本。
  • setSelected,用于在comboBox初始化完毕以前,设置默认选中的元素。接受另另另有1个字符串变量,用于表示选中item的值。
  • getSelected,获取选中的item,将返回另另另有1个JSON对象,含有val和txt属性。
  • onChange事件,当comboBox中的item被选中时触发。

  全版示例下载:comboBox.zip

  另外推荐另另另有1个好用的select控件,功能很强大!

  https://select2.org/