Selectize使用总结

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

一、简介

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() 进行刷新

 

相关文章
|
JavaScript 前端开发 API
【前端用法】jQuery在线引用地址(全)
【前端用法】jQuery在线引用地址(全)
1533 0
|
调度
关于定时任务,看着一系列就够了——2.Cron表达式
软件开发定时任务基础—— Cron 表达式介绍
1409 0
关于定时任务,看着一系列就够了——2.Cron表达式
|
测试技术
软件测试|web自动化测试神器playwright教程(十一)
软件测试|web自动化测试神器playwright教程(十一)
292 0
|
6月前
|
JSON C# 数据格式
C# | 使用DataGridView展示JSON数组
你想展示一个复杂的JSON数组数据吗?但是你却不知道该如何展示它,是吗?没问题,因为本文就是为解决这个问题而生的!使用DataGridView轻松地将JSON数组数据以表格的形式呈现出来,这样你就可以更加清晰地了解和处理数据了。 让我们一起来探索如何实现吧!
174 0
C# | 使用DataGridView展示JSON数组
|
6月前
|
前端开发 JavaScript C#
10款值得推荐的Blazor UI组件库
10款值得推荐的Blazor UI组件库
320 0
Layui 内置方法 - layer.tab(tab层)
Layui 内置方法 - layer.tab(tab层)
113 0
|
Java Spring
【Java异常】idea 报错:无效的目标发行版:17 的解决办法
【Java异常】idea 报错:无效的目标发行版:17 的解决办法
1915 0
|
前端开发
css实现立体感按钮
css实现立体感按钮
206 0
css实现立体感按钮
|
Windows
AntDesignPro使用electron构建桌面应用
AntDesignPro使用electron构建桌面应用
265 0
|
机器学习/深度学习 JSON 算法
【大模型应用实战】 Prompt Engineering【01 基本原则】
> 本文主要观点来自 [ChatGPT Prompt Engineering 吴恩达 Prompt](https://learn.deeplearning.ai/) 在学习本课程之前,我一直认为 prompt engineering 只不过是大模型发展不够完善而出现的过渡态,但随着学习的深入,我的观点发生了改变. prompt enginnering 之于大模型,就如同沟通技巧之于人类. 更好的