Selectize使用总结，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

文档说明
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()：聚焦后下拉框自动展开

telephoneSelectize.setValue('12345678', true);     telephoneSelectize.setTextboxValue('1111');     telephoneSelectize.focus();

4.启用禁用

var $selectTelephone = $("#select-telephone").selectize();     telephoneSelectize = $selectTelephone[0].selectize;     telephoneSelectize.disable();     telephoneSelectize.enable();

5.添加下拉选项

telephoneSelectize.addOption(telArray);    telephoneSelectize.enable();

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

—-想了解更多的jQuery特效教程关注<计算机技术网(www.ctvol.com)!!>