Selectize使用总结

Selectize是一个可扩展的基于jQuery 的自定义下拉框的UI控件。它对展示标签、联系人列表、国家选择器等比较有用。它的大小在~ 7kb（gzip压缩）左右。提供一个可靠且体验良好的干净和强大的API。

功能介绍：

选项可查询和排序；

使用箭头键←和→在1️⃣选中选项之间移动；

对选择和删除项目可通过option/ctrl键多选

允许用户创建选项（包括异步）；

远程数据加载；

干净的API和代码，接口化处理，易于修改；

可扩展强，使用插件API开发自定义功能；

触摸支持，支持iOS 5 +设备。

依赖：

jquery (1.7 and greater)

sifter (bundled in "standalone" build)

microplugin (bundled in "standalone" build)

所有预编译的文件都在“dist”文件夹下，引入 standalone/selectize.min.js 和 css/selectize.default.css即可.

目录结构

js/

standalone/

selectize.js — With dependencies, minus jquery

selectize.js — Without dependencies

less/

selectize.less — Core styles

selectize.default.less — Default theme

selectize.bootstrap2.less — Bootstrap 2 theme

selectize.bootstrap3.less — Bootstrap 3 theme

plugins/ — Individual plugin styles

css/

selectize.css — Core styles

selectize.default.css — Default theme (with core styles)

selectize.bootstrap2.css - Bootstrap 2 theme

selectize.bootstrap3.css - Bootstrap 3 theme

文档说明

以电话号码为例，做下总结

create: 允许增加下拉选项，输入后按回车即可；

render：item和option的值需要使用HTML标签进行格式化；

load： query为在输入框输入的值，需要注意的时，如果你输入的值在之前就搜索过，那么它不会再执行该方法。

setValue(value, silent):  设置选中值，注意这个值必须已在下拉列表中；

setTextboxValue：　　设置文本框值，并非选中的值；

getValue()：　　　　    获取选中的值；

focus()：　　　　 　　聚焦后下拉框自动展开；

clear()：　　　　　　清空选中

可以增加一个选项，也可增加一个数组，如果已经存在不会变化。此操作不会刷新下拉框选项，需要使用refreshOptions() 进行刷新