Selectize.js插件使用简介

简介：

Selectize.js是一款基于JQuery的操作<select>、<input>标签的优秀插件，实现搜索、动态选择、多选、动态数据加载等功能。

这儿简单介绍了插件的一些属性的含义，事件的定义。以及两个实际情况中selectize插件综合运用。

插件下载：https://github.com/brianreavis/selectize.js/archive/master.zip

使用示例：

$('#select-beast').selectize({
    create: true,
    sortField: {
        field: 'text',
        direction: 'asc'
    },
    dropdownParent: 'body'
});

属性简介：

1、create: true下拉option中没有输入的内容会出现Add+输入的内容，false则只能在已有的option中选择，不允许添加。

2、persist: true对于使用create方式添加的option会添加到select标签下面，再次点击会在下拉中出现。False，create方式添加的option只是显示在选框中，再次点击不会出现在下拉框中。

3、createOnBlur: true光标移除的时候自动创建输入的内容为选项，false不会创建。

4、sortField：｛ //排序
field：’text’, // text:依据文本排序，id：依据value排序
direction: ‘asc’ // 升序降序
｝

5、dropdownParent：’body’下拉选依据body生成。有时候设置了样式，其他的元素浮动在select标签上方，可能导致下拉框下沉显示不出来，设置该属性则不会存在这个问题。

6、maxItems：3多选的时候设置最大选择数量

事件：

1、onChange        : eventHandler('onChange'),

2、onItemAdd       : eventHandler('onItemAdd'),

3、onItemRemove    : eventHandler('onItemRemove'),

4、onOptionAdd     : eventHandler('onOptionAdd'),

5、onOptionRemove  : eventHandler('onOptionRemove'),

6、onDropdownOpen  : eventHandler('onDropdownOpen'),

7、onDropdownClose : eventHandler('onDropdownClose'),

8、onFocus         : eventHandler('onFocus'),

9、onBlur          : eventHandler('onBlur'),

10、onInitialize    : eventHandler('onInitialize'),

事件运用示例：

控制台输出事件名和一个Object：

var eventHandler = function(name) {
    return function() {
        console.log(name, arguments);
        $('#log').append('<div><span class="name">' + name + '</span></div>');
    };
};

注：该方法定义需要放在事件调用之前。

selectize插件API:

selectize对象的方法，插件已经给出来的方法。

获取selectize对象：

var $select = $('#select-beast').selectize({
    create: true,
    sortField: {
        field: 'text',
        direction: 'asc'
    },
    dropdownParent: 'body'
});
var control = $select[0].selectize;

API:

1、clear()：清除选择的option

control.lock();

绑定在JQuery事件上使用：

$('#button-clear').on('click', function() {
    control.lock();
});

2、clearOptions()：清除select下的option，清除之后就没有任何option可选了

3、addOption()：添加option

4、addItem(2)：选择value=’2’的option

5、setValue([2, 3])：多选的时候选中value=’2’和’3’的option

根据selectize事件和API动态加载option示例：

有如下两个select选框

<select id="area">
<option value="">请选择地域</option>
<option value="0">重庆</option>
<option value="1">四川</option>
</select>
<select id="city">
<option value="">请选择省会</option>
<option value="0">上海</option>
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">重庆 </option>
</select>

情景一、request中包含了页面需要的数据：

<script>
var options = [];
<c:forEach items="${areaList}" var="area">
options.push({
id : "${area.areaId}",
title : "${area.name}"
});
</c:forEach>
$('#area).selectize({
	valueField: 'id',
	labelField: 'title',
	searchField: 'title',
	sortField: 'title',
	options: options,
	create: false,
	dropdownParent : 'body',
});
</script>

情景二、Ajax动态请求数据，根据地域选省会

<script>
var eventHandler = function(name) {
	return function() {
		console.log(name);
		getCity();
	};
};
var $area = $('#area).selectize({
	valueField: 'id',
	labelField: 'title',
	searchField: 'title',
	sortField: 'title',
	options: [],
	create: false,
	dropdownParent : 'body',
onFocus : eventHandler('onFocus'),
});
var control = $area[0].selectize;
function getCity(){
var area = $(“#area”).val();
$.ajax({
	url: "${basePath}getCity.do",
	type: "post",
	dataType: "json",
	async: false,
	data: {
		'area': area
	},
	success: function(res) {
// res是list集合中存放map，map key：cityId，map value：cityName
		// 重新生成option之前先清除前面生成的option
		control.clearOptions();
		for(var i = 0; i < res.length; i++){
			control.addOption({
				id : res[i]["cityId"],
				title : res[i]["cityName"],
			});
		}
	},
	error: function() {
		alert("error");
	}
});
}
</script>

可能遇到的问题：

1、插件放到自己的程序后提示有selectize.default.css或者selectize.legacy.css还有其他css文件找不到，确保如图所示的两个href路径正确

2、调整样式，使用自己想要的样式在如图所示的位置：

暂时就只研究了这些，更多的内容，有兴趣的小伙伴可以再去深入的研究。