Selectize.js API完全指南：从基础方法到高级应用的终极教程

2026-02-05 05:53:12作者：邬祺芯Juliet

Selectize.js是一个基于jQuery的强大自定义选择框UI控件库，专为现代Web应用设计。这个终极指南将带你全面了解Selectize.js的API功能、核心方法和高级应用技巧。🎯

什么是Selectize.js？

Selectize.js是一个功能丰富的JavaScript库，用于创建高度可定制的下拉选择框和标签输入控件。它结合了文本输入框和选择框的最佳特性，提供了出色的用户体验和强大的API接口。

核心API方法详解

初始化方法

Selectize.js的核心是通过jQuery选择器进行初始化：

$('select').selectize({
  // 配置选项
});

常用配置选项

搜索和筛选选项

score - 自定义搜索评分函数
sortField - 结果排序字段
searchField - 搜索字段配置

外观和行为选项

create - 允许用户创建新选项
maxItems - 最大选择数量限制
placeholder - 占位符文本

高级功能应用

远程数据加载

Selectize.js支持异步远程数据加载，非常适合处理大量数据：

$('#remote-select').selectize({
  valueField: 'id',
  labelField: 'name',
  searchField: 'name',
  load: function(query, callback) {
    if (!query.length) return callback();
    $.ajax({
      url: '/api/search',
      data: { q: query },
      success: function(response) {
        callback(response.data);
      }
    });
  }
});

自定义渲染器

通过自定义渲染器，你可以完全控制选项的显示方式：

render: {
  option: function(data, escape) {
    return '<div class="option">' +
      '<span class="title">' + escape(data.title) + '</span>' +
      '<span class="description">' + escape(data.description) + '</span>' +
    '</div>';
  }
}

事件处理系统

Selectize.js提供了丰富的事件系统：

var selectize = $('#my-select')[0].selectize;

// 监听选择变化
selectize.on('change', function(value) {
  console.log('Selected value:', value);
});

// 监听选项添加
selectize.on('item_add', function(value, $item) {
  console.log('Item added:', value);
});