selectize.js的属性和方法

其他 2021-02-01 16:49:33 阅读次数: 0

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

文档：https://github.com/selectize/selectize.js
用例：https://github.com/selectize/selectize.js/tree/master/examples
属性/方法：https://github.com/selectize/selectize.js/blob/master/docs/usage.md

一、配置

  1. selectize属性会添加到原始的<select> / <input>元素上-该属性指向基础Selectize实例。

    配置选项 描述 取值
    maxItems 多选的时候设置最大选择数量，不设置则为多个选择 number
    valueField 按照元素的属性值进行取值 ,默认用取id的值 string
    labelField 按照元素的属性值在下拉框中显示，如果属性值相同只显示一个 string
    searchField 筛选选项时要分析的属性名称数组。
    create true下拉option中没有输入的内容会出现Add+输入的内容，false则只能在已有的option中选择，不允许添加。 boolean
    persist true对于使用create方式添加的option会添加到select标签下面进行保留。false，create方式添加的option只是显示在选框中，不会进行保留。 boolean
    options 下拉框中显示的选项 array
    createOnBlur true光标移除的时候自动创建输入的内容为选项，false不会创建。 boolean
    sortField 排序，其中field:'text’按文本进行排序，direction:‘asc’表示升序排序,'desc’表示降序排序 object
    dropdownParent 取值’body’，下拉选依据body生成。有时候设置了样式，其他的元素浮动在select标签上方，可能导致下拉框下沉显示不出来，设置该属性则不会存在这个问题。 String
    allowEmptyOption 是否允许选择空选项,默认为false boolean
    onChange 下拉选项改变时触发方法，参数为value fn
    onDelete 删除选中项时触发方法，参数为values,方法返回true，则删除 fn
    createFilter 新建数据时对数据进行过滤 fn
    render 有两个属性①option属性，在渲染下拉列表时调用
    ②item在选中下来列表时调用
    ③optgroup_header 分组时调用改方法进行渲染    		 object
    load 当应该从服务器加载新选项时调用。使用当前查询字符串和回调函数调用，以在加载结果时调用结果（或在出现错误时不调用结果）。 fn
    onInitialize selectize初始化完成后触发函数 fn
    onItemAdd/onItemRemove 添加/移除 item时触发函数 fn
    onOptionAdd/onOptionRemove 添加/移除option时触发函数 fn
    onDropdownOpen/onDropdownClose 展开/关闭下拉框时触发函数 fn
    onFocus /onBlur 获取/失去焦点时触发函数 fn
    optgroups 将选项进行分组
    optgroupField 按什么属性进行分组 string 
$('#select-words-regex').selectize({
    
    
	create: true,
	sortField: 'text', //按文本进行排序
	createFilter: '^a+$' //在添加新选项时，过滤掉不是全a的数据，当然也可以使用函数
});

一、属性

属性名称 描述
options 包含整个选项池的对象。该对象由每个对象的值作为键。
item 所选值的数组。

二、方法

(一) Options

方法名称 描述
addOption(data) 添加一个可用选项或选项数组。如果已经存在，将不会发生任何事情。注意：这不会刷新选项列表下拉列表（为此使用refreshOptions()）。
updateOption(value, data) 更新一个可供选择的选项。如果在所选项目或选项下拉列表中可见，它将自动重新渲染。
updateOption(value, data) 删除由给定值标识的选项。
updateOption(value, data) 从控件中删除所有选项。
getOption(value) 检索由给定值标识的选项的jQuery元素。
getAdjacentOption(value, direction) 相对于当前突出显示的选项，检索上一个或下一个选项的jQuery元素。direction对于“下一个” ，参数应为1；对于“上一个” ，参数应为-1。
refreshOptions(triggerDropdown) 刷新自动完成下拉菜单中显示的可用选项列表。triggerDropdown为true(默认)会展开可用选项，为false则不展开 
//#money有selectize类时可以如下写
 $(".selectize").selectize();
$("#money")[0].selectize.clearOptions();
$("#money")[0].selectize.addItem("");
$("#money")[0].selectize.addOption({
    
    value: 123, text: '金额'});

(二) Items

方法名称 描述
clear(silent) 重置/清除控件中所有选定的项目。如果silent为真，则不会在原始输入上触发任何更改事件。
getItem(value) 返回与给定值匹配的项目的jQuery元素。
addItem(value, silent) “选择”一个项目。将其添加到当前插入符位置的列表中。如果silent为真，则不会在原始输入上触发任何更改事件。
removeItem(value, silent) 在create给定用户输入的情况下，调用“ 选择”设置中提供的方法，该方法应提供新项目的数据。完成后，它将被添加到项目列表中。
createItem(value, [triggerDropdown], [callback]) 在create给定用户输入的情况下，调用“ 选择”设置中提供的方法，该方法应提供新项目的数据。完成后，它将被添加到项目列表中。
refreshItems() 重新呈现选定的项目列表。 
$(".selectize").selectize();
 $("#stuMajor")[0].selectize.clear();

(三) Optgroups

方法 描述
addOptionGroup(id, data) 注册一个新的optgroup以便将选项存储到其中。该id参数指的是optgroupField设置所标识的选项中属性的值。
removeOptionGroup(id) 删除单个选项组。
clearOptionGroups() 删除所有现有的选项组。

(四) Events

方法 描述
on(event, handler) 添加一个事件监听器。
off(event, handler) 删除事件监听器。
off(event) 删除所有事件侦听器。
trigger(event, …) 触发事件监听器。

(五) Dropdown

方法 描述
open() 显示包含可用选项的自动完成下拉列表。
close() 关闭自动完成下拉菜单。
positionDropdown() 计算并应用下拉菜单的适当位置。

(六) Other

方法 描述
destroy() 销毁控件并取消绑定事件侦听器，以便可以对其进行垃圾回收。
load(fn) 通过调用提供的功能来加载选项。该函数应接受一个参数（回调），并在结果可用时调用回调。
focus() 使控件成为焦点。
blur() 强制控件失去焦点。
lock() 禁用控件上的用户输入（请注意：控件仍可以接收焦点）。
unlock() 重新启用控件上的用户输入。
disable() 完全禁用控件上的用户输入。禁用时，它无法获得焦点。
enable() 启用控件，使其可以响应焦点和用户输入。
getValue() 返回控件的值。如果可以使用“选择”输入标签选择多个项目（例如<select multiple>），则返回一个数组。否则，返回一个字符串（delimiter如果为“ multiple” ，则以分隔）。
setValue(value, silent) 将所选项目重置为给定值。
setCaret(index) 将插入符号移动到指定位置（index即所选项目列表中的索引）。
isFull() 返回用户是否可以选择更多项目。
clearCache(template) 清除渲染缓存。有一个可选的模板参数（例如option，item）以清除只是缓存。
updatePlaceholder() 更改“ settings.placeholder”值时，将显示新的占位符。
setTextboxValue(str) 设置输入字段的值。 
var $selectTelephone = $("#select-telephone").selectize();
telephoneSelectize = $selectTelephone[0].selectize;
 telephoneSelectize.disable();
 telephoneSelectize.enable();
 //获取选中的值
 telephoneSelectize.getValue();
 //锁定选择控件以防止用户交互
 telephoneSelectize.lock();

(七) 搜索相关

选项 描述 类型
options 原始搜索选项。 object
query 原始用户输入。 string
tokens 包含已解析的搜索标记的数组。令牌是包含两个属性的对象：string和regex。 array
total 结果总数。 int
items 匹配结果列表。每个结果都是一个包含两个属性的对象：score和id。 array

(八) 用例

[1]. 部分参数解释

	//初始化selectizef
	var $select = $('#select-tools').selectize();
	//获取selectize实例
	var control = $select[0].selectize;
	//清空选择栏中所选的信息
	control.clear();
	//清空所有下拉选项
	control.clearOptions();
	//添加一个下拉选项
	control.addOption({
    
    
		id: 4,
		title: 'Something New',
		value: '120'
	});
	//选择value为'time'和‘date’的选项
	control.setValue(["time",'data']);

[2]. item和option的区别

如下例子中，点击item是会进行跳转到相关页面的。
在这里插入图片描述

$('#select-links').selectize({
    
    
	theme: 'links',
	maxItems: null,
	valueField: 'id',
	searchField: 'title',
	//选项中的数据，是从options中获取的
	options: [
		{
    
    id: 1, title: 'DIY', url: 'https://diy.org'},
		{
    
    id: 2, title: 'Google', url: 'http://google.com'},
		{
    
    id: 3, title: 'Yahoo', url: 'http://yahoo.com'},
	],
	render: {
    
    
		// 渲染下拉列表选项
		option: function(data, escape) {
    
    
			return '<div class="option">' +
					'<span class="title">' + escape(data.title) + '</span>' +
					'<span class="url">' + escape(data.url) + '</span>' +
				'</div>';
		},
		//选中下拉选项时，在文本框中显示的信息
		item: function(data, escape) {
    
    
			return '<div class="item"><a href="' + escape(data.url) + '">' + escape(data.title) + '</a></div>';
		}
	},
	//添加新选项时触发
	create: function(input) {
    
    
		return {
    
    
			id: 0,
			title: input,
			url: '#'
		};
	}
});

[3]. 常用事件

var eventHandler = function(name) {
    
    
    return function() {
    
    
        console.log(name, arguments);
        $('#log').append('<div><span class="name">' + name + '</span></div>');
    };
};
var $select = $('#select-state').selectize({
    
    
	create          : true,
	onChange        : eventHandler('onChange'),
	onItemAdd       : eventHandler('onItemAdd'),
	onItemRemove    : eventHandler('onItemRemove'),
	onOptionAdd     : eventHandler('onOptionAdd'),
	onOptionRemove  : eventHandler('onOptionRemove'),
	onDropdownOpen  : eventHandler('onDropdownOpen'),
	onDropdownClose : eventHandler('onDropdownClose'),
	onFocus         : eventHandler('onFocus'),
	onBlur          : eventHandler('onBlur'),
	onInitialize    : eventHandler('onInitialize'),
});

[4]. 从服务器获取数据

$('#select-repo').selectize({
    
    
	valueField: 'url',
	labelField: 'name',
	searchField: 'name',
	options: [],
	create: false,
	render: {
    
    
		option: function(item, escape) {
    
    
			console.log(456);
			return '<div>' +
				'<span class="title">' +
					'<span class="name"><i class="icon ' + (item.fork ? 'fork' : 'source') + '"></i>' + escape(item.name) + '</span>' +
					'<span class="by">' + escape(item.username) + '</span>' +
				'</span>' +
				'<span class="description">' + escape(item.description) + '</span>' +
				'<ul class="meta">' +
					(item.language ? '<li class="language">' + escape(item.language) + '</li>' : '') +
					'<li class="watchers"><span>' + escape(item.watchers) + '</span> watchers</li>' +
					'<li class="forks"><span>' + escape(item.forks) + '</span> forks</li>' +
				'</ul>' +
			'</div>';
		}
	},
	score: function(search) {
    
    
		var score = this.getScoreFunction(search);
		return function(item) {
    
    
			return score(item) * (1 + Math.min(item.watchers / 100, 1));
		};
	},
	load: function(query, callback) {
    
    
		if (!query.length) return callback();
		$.ajax({
    
    
			url: 'https://api.github.com/legacy/repos/search/' + encodeURIComponent(query),
			type: 'GET',
			error: function() {
    
    
				callback();
			},
			success: function(res) {
    
    
		 		callback(res.repositories.slice(0, 10));
			}
	});
	}
});

[5]. 回填数据

//index页面教师选择
var initTeacherForIndex = function ($target, options, items) {
    
    
    $target.selectize({
    
    
        items: items,
        options: options,
        valueField: 'id',
        searchField: ['code', 'nameZh'],
        create: false,
        render: {
    
    
            item: function (item, escape) {
    
    
                return '<div id="teacherAssocId">'
                    + '<span>' + escape(item.nameZh) + '(' + escape(item.code) + ')</span>'
                    + '</div>';
            },
            option: function (item, escape) {
    
    
                return '<div>'
                    + '<span>' + escape(item.nameZh) + '(' + escape(item.code) + ')</span>'
                    + '</div>';
            }
        },
        load: function (query, callback) {
    
    
            if (!query.length) return callback();
            $.ajax({
    
    
                url:'如果需要进行搜索时的搜索地址',
                type: 'get',
                data: {
    
    
                    zaiZhi: true,
                    term: query
                },
                error: function () {
    
    
                    callback();
                },
                success: function (res) {
    
    
                    var result = [];
                    $.each(res, function (index, item) {
    
    
                        result.push({
    
    id: item.id, code: item.code, nameZh: item.person.nameZh});
                    });
                    callback(result);
                }
            });
        }
    });
}


var manageTeacherAssoc = function () {
    
    
    var search = location.search.substring(1);
    var searchObj = search ? JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g, '":"') + '"}',
        function (key, value) {
    
    
            return key === "" ? value : decodeURIComponent(value)
        }) : {
    
    };
    if (searchObj.teacherAssoc) {
    
    
        $.ajax({
    
    
            url: '需要回填的信息的请求地址',
            async:false,
            data: {
    
    
                teacherAssoc: searchObj.teacherAssoc,
            },
            success: function (result) {
    
    
               var teacherAssocOption = {
    
    };
               var teacherAssocOptions = [];
                teacherAssocOption['id'] = result.id;
                teacherAssocOption['code'] = result.code;
                teacherAssocOption['nameZh'] = result.person ? result.person.nameZh : '';
                teacherAssocOptions.push(teacherAssocOption);
                initTeacherForIndex($('#teacherAssoc'), teacherAssocOptions, result.id);
            }
        });
    } else {
    
    
        initTeacherForIndex($('#teacherAssoc'), [], [])
    }
}



manageTeacherAssoc();

[6]. 追加数据

var res = {
    
    };//新数据
//追加下拉选项
$('#student')[0].selectize.addOption({
    
    
                id: res.id,
                nameZh: res.person.nameZh,
                code: res.code,
                personId: res.person.id
              });
//添加追加的选中的选项
$('#student')[0].selectize.addItem(res.id);

(九) 插件

[1] 删除按钮

$('.input-tags').selectize({
    
    
	plugins: ['remove_button'],
	persist: false,
	create: true,
	render: {
    
    
		item: function(data, escape) {
    
    
			return '<div>"' + escape(data.text) + '"</div>';
		}
	},
	onDelete: function(values) {
    
    
		return confirm(values.length > 1 ? 'Are you sure you want to remove these ' + values.length + ' items?' : 'Are you sure you want to remove "' + values[0] + '"?');
	}
});

[2] 拖动

需要使用jquery ui

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/stylesheet.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/selectize.default.css">
    <link rel="stylesheet" href="./css/jquery-ui.css">
</head>

<body>
    <div class="control-group">
        <label for="input-sortable">Tags:</label>
        <input type="text" id="input-sortable" class="input-sortable demo-default" value="drag,these,items,around">
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/selectize.js"></script>
    <script src="./js/jquery-ui.js"></script>
    <script>
        $('.input-sortable').selectize({
     
     
            plugins: ['drag_drop'],
            persist: false,
            create: true
        });
    </script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/kouzuhuai2956/article/details/108724746
今日推荐
周排行
Sping整合ActiveMQ（五.常见错误分析）
jquery ajax发送请求实例模板
北风设计模式课程---24、迭代模式
[Luogu] 兽径管理
1030 Travel Plan （30 分）(dijkstra算法+dfs+边权)
springboot-shiro中的问题
数据访问安全代理 CASB
RocketMQ与Kafka对比
Rider 2019.3.3 发布，跨平台 .NET IDE
Ubuntu切换root su -
每日归档
更多
2025-03-17(0)
2025-03-16(0)
2025-03-15(0)
2025-03-14(0)
2025-03-13(0)
2025-03-12(0)
2025-03-11(0)
2025-03-10(0)
2025-03-09(0)
2025-03-08(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022