一、简介
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
文档说明
github:https://github.com/selectize/selectize.js
配置: https://github.com/selectize/selectize.js/blob/master/docs/usage.md
事件: https://github.com/selectize/selectize.js/blob/master/docs/events.md
API :https://github.com/selectize/selectize.js/blob/master/docs/api.md
自定义插件:https://github.com/selectize/selectize.js/blob/master/docs/plugins.md
三、使用总结
以电话号码为例,做下总结
1.初始化
$("#select-telephone").selectize({
valueField: 'TelephoneNumber',
labelField: 'TelephoneNumber', searchField: 'TelephoneNumber', create: true, render: { item: function (item, escape) { return '<span>' + escape(item.TelephoneNumber) + '</span>'; }, option: function (item, escape) { return fortmatTelephone(item.TelephoneNumber, item.ShortNumber); } }, load: function (query, callback) { // console.log(query);//可实时远程查询 //callback(data); } }); function fortmatTelephone(tel, shortTel) { var markup = '<div class="show-select-option">'; if (!isEmpty(tel)) { shortTel = isEmpty(shortTel) ? "" : ' (' + shortTel + ")"; markup += '<p class="text-primary">电话:' + tel + shortTel + '</p>'; } return markup + '</div>'; }
create: 允许增加下拉选项,输入后按回车即可;
render:item和option的值需要使用HTML标签进行格式化;
load: query为在输入框输入的值,需要注意的时,如果你输入的值在之前就搜索过,那么它不会再执行该方法。
2.下拉关闭事件
selectize.on('dropdown_close',
function ($dropdown) {
if (closeCount % 2 === 0) { //执行2次了,通过closeCount变量来消除bug } closeCount += 1; });
3.选中值
setValue(value, silent): 设置选中值,注意这个值必须已在下拉列表中;
setTextboxValue: 设置文本框值,并非选中的值;
getValue(): 获取选中的值;
focus(): 聚焦后下拉框自动展开;
clear(): 清空选中
telephoneSelectize.setValue('12345678', true);
telephoneSelectize.setTextboxValue('1111'); telephoneSelectize.focus();
telephoneSelectize.clear();
4.启用禁用
var $selectTelephone = $("#select-telephone").selectize();
telephoneSelectize = $selectTelephone[0].selectize;
telephoneSelectize.disable();
telephoneSelectize.enable();
5.添加下拉选项
telephoneSelectize.addOption(telArray);
telephoneSelectize.enable();
可以增加一个选项,也可增加一个数组,如果已经存在不会变化。此操作不会刷新下拉框选项,需要使用refreshOptions() 进行刷新