Selectize.js 教程

2026-01-17 09:18:01作者：董灵辛Dennis

1. 项目目录结构及介绍

.
├── dist/                # 包含预编译的JS和CSS文件
│   ├── css/             # CSS样式文件
│   │   └── selectize.default.css    # 默认主题样式
│   ├── selectize.min.js   # 带依赖的压缩版JS（包含Sifter和Microplugin）
│   └── selectize.js      # 未压缩版JS
├── examples/            # 示例代码
├── src/                 # 源码目录
│   ├── less/              # Less源码
│   ├── plugins/           # 插件源码
│   ├── scripts/           # JS源码
│   └── templates/         # 模板文件
└── ...

dist/ 目录包含了用于部署到生产环境的预编译文件，如JS和CSS。 examples/ 提供了各种使用场景的示例代码。 src/ 是源码存放的地方，包括Less样式、JavaScript脚本、插件和模板。

2. 项目启动文件介绍

Selectize.js 并不是一个服务器端运行的应用，它是一个基于jQuery的前端库。因此没有标准的启动文件。不过在实际应用中，你需要在HTML中引入 selectize.min.js 或 selectize.js 文件，并确保先加载jQuery。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selectize.js Example</title>
    <link rel="stylesheet" href="path/to/css/selectize.default.css">
</head>
<body>
    <select multiple placeholder="Select some options..."></select>

    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/selectize.min.js"></script>
    <script>
        $(document).ready(function() {
            $('select').selectize({});
        });
    </script>
</body>
</html>

在这个例子中，selectize.min.js 初始化了选择框并添加了相应的功能。

3. 项目的配置文件介绍

Selectize.js 的配置是通过JavaScript对象传递给初始化方法的。以下是一些基本的配置选项：

$(document).ready(function() {
    $('select').selectize({
        // 配置项
        delimiter: ',',     // 多选时分隔符
        persist: false,       // 是否保存已选值到输入框
        create: true,        // 是否允许创建新值
        createOnBlur: true,  // 创建新值后是否失去焦点
        sortField: 'text'    // 排序依据的字段
    });
});