selectize.js 基于 jQuery 的 Select 下拉菜单插件

• Z时代
• 2024-01-10
• 分类：IT

Selectize.js 是一款基于 jQuery 的操作 <select>、<input> 标签的优秀插件，实现搜索、动态选择、多选、动态数据加载等功能，Selectize 的目标是通过简单而强大的 API 提供坚实可用的用户体验。

使用方法

<script type="text/javascript" src="selectize.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css" />

$('#select-beast').selectize({
    create: true,
    sortField: {
        field: 'text',
        direction: 'asc'
    },
    dropdownParent: 'body'
});

IE8 支持

To support Internet Explorer 8, es5-shim must be added your page.

<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.0.8/es5-shim.min.js"></script>
<![endif]-->

可选参数

Plugins

Via the microplugin interface, features can be added to Selectize without modifying the main library. This is great because it protects against code bloat, allows for lean builds, and allows for addons to be sanely isolated. The plugin system isn’t meant to be sexy; it’s lean, makes very few assumptions, and gives the developer complete control.

Example Plugins

A few notes:

• All plugins live in their own folders in “src/plugins”.
• Plugin names should be in follow the format: /[a-z_]+$
• JS source should live in a “plugin.js” file (required).
• CSS should live in a “plugin.less” file (optional). It will be bundled at build time.
• Plugins are initialized right before the control is setup. This means that if you want to listen for events on any of the control’s elements, you should override the setup() method (see “DOM Events”).

Boilerplate

Selectize.define('plugin_name', function(options) {
  // options: plugin-specific options
  // this: Selectize instance
});

Adding Dependencies

Selectize.define('plugin_name', function(options) {
  this.require('another_plugin');
});

Overriding Methods

Methods should be extended by wrapping them:

var self = this;
this.someMethod = (function() {
  var original = self.someMethod;
  return function() {
    // do your logic
    return original.apply(this, arguments);
  };
})();

Important: If the method you’re overriding returns a value, make sure the overridden function returns a value as well.

DOM Events

Because all elements for the control are created within the setup() method (which is invoked after the plugin initialized) events should be added by overriding the setup method, like so:

Selectize.define('plugin_name', function(options) {
  var self = this;
  // override the setup method to add an extra `click`  handler
  this.setup = (function() {
    var original = self.setup;
    return function() {
      original.apply(this, arguments);
      this.$control.on('click', 'div', function(e) {
        alert('A div was clicked!');
      });
    };
  })();
});

Plugin Usage

List (without options)

$('select').selectize({
  plugins: ['plugin_a', 'plugin_b']
});

List (with options)

$('select').selectize({
  plugins: {
    'plugin_a': { /* ... */ },
    'plugin_b': { /* ... */ }
  }
});

For a more detailed description of plugin option formats and how the plugin system works, check out the microplugin documentation.

Events

In the usage documentation, a few callbacks are listed that allow you to listen for certain events. Callbacks aren’t always ideal though; specifically when you wish to have multiple handlers.

Selectize instances have a basic event emitter interface that mimics jQuery, Backbone.js, et al:

var handler = function() { /* ... */ };
selectize.on('event_name', handler);
selectize.off('event_name');
selectize.off('event_name', handler);

List of Events

Selectize API

Selectize controls can be controlled programmatically via the methods described in this section. When initializing the control, the selectize property is added on the original <select> / <input> element—this property points to the underlying Selectize instance.

// initialize the Selectize control
var $select = $('select').selectize(options);
// fetch the instance
var selectize = $select[0].selectize;

Properties

Methods

Related Objects

Search

特色

• 简洁的 API，有详细的帮助文档；
• 支持智能排序和多属性搜索，甚至可以使用打分函数进行排序的；
• 支持键盘操作，对用户使用友好；
• 支持同时选择和删除多个项目；
• 支持远程数据加载，例如 Ajax 调用；

相关链接

• 插件地址：https://plugins.jquery.com/selectize/
• Github 地址：https://github.com/selectize/selectize.js
• 在线实例：http://selectize.github.io/selectize.js/
• 在线示例：https://www.wenjiangs.com/runcode?slug=X1IpnCa8
• 更多示例：https://www.wenjiangs.com/wp-content/uploads/2020/selectize.js-demo/

以上是 selectize.js 基于 jQuery 的 Select 下拉菜单插件 的全部内容， 来源链接： utcz.com/p/232525.html