Selectize使用总结-阿里云开发者社区

开发者社区> 芝麻软件> 正文

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9496 0
MySQL中SELECT语句简单使用
MySQL中SELECT语句简单使用最近开始复习mysql,查漏补缺吧。 关于mysql1.MySQL不区分大小写,但是在MySQL 4.1及之前的版本中,数据库名、表名、列名这些标识符默认是区分大小写的;在之后的版本中默认不区分大小写。
633 0
OSS Select使用场景及技巧
背景介绍 OSS Select是OSS近期推出的一项新功能,它可以对OSS上的类CSV文件(其他类型文件比如Json也会很快推出)在服务器端运行SQL查询,仅将查询结果返回给客户端。举例来说,假如你有一个10GB的csv日志文件,有一列数据是错误码,想把其中所有错误码等于500的日志找出来,用OSS Select仅仅返回错误码是500的日志,在从而降低用户的数据传输成本以及处理数据的成本,相比在客户端下载整个文件再处理在性能上也可以提高最多到6倍以上。
15552 0
android中使用selector动态改变imageView或ImageViewButton的背景
近期有传闻称,谷歌将融合Chrome和Android系统,开发新的笔记本平台。最新消息显示,谷歌将于2017年第三季度推出这一融合操作系统。
3815 0
Python异步非阻塞IO多路复用Select/Poll/Epoll使用
来源:http://www.haiyun.me/archives/1056.html 有许多封装好的异步非阻塞IO多路复用框架,底层在linux基于最新的epoll实现,为了更好的使用,了解其底层原理还是有必要的。 下面记录下分别基于Select/Poll/Epoll的echo server实现。 Python Select Server,可监控事件数量有限制: #!/us
1541 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13186 0
Select Top在不同数据库中的使用
1. oracle数据库 SELECT * FROM TABLE1 WHERE ROWNUM
679 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6893 0
+关注
芝麻软件
编程语言,框架相关专家
579
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载