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

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

 

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

相关文章
站在Java的视角,深度分析防不胜防的小偷——“XSS”
站在Java的视角,深度分析防不胜防的小偷——“XSS”
6 0
高校学生在家实践ECS弹性云服务器
简单谈谈我这几周使用ECS弹性云服务器的体验感
5 0
高校学生在家实践ECS弹性云服务器
简单谈谈我这几周使用ECS弹性云服务器的体验感
5 0
Vue的方法的调用以及传参
前面的文章讲到了如何用CDN的方式引入vue.js。今天这篇文章介绍如何在vue中调用方法以及传参!
8 0
【字符串专场】只会使用库函数?面试官气的让我出门左转(上)
字符串这东西大家无论是学习还是工作中,接触的肯定不少,平时如果对字符串处理,大家肯定都是直接使用库函数。毕竟字符串的库函数,那可是多了去了,像Java和Python这种语言,只要你能想到的操作基本都帮你封装好了。但是这就容易让人养成了不好的习惯,只会使用库函数,基础不扎实,所以打基础的时候,千万不要迷恋库函数!!为了帮助兄弟们打下较好的基础,我整理了这篇字符串处理专题训练,内容从易到难,帮助你完美过度,夯实基础,其中更附带详细解析。
4 0
【字符串专场】只会使用库函数?面试官气的让我出门左转(中)
【字符串专场】只会使用库函数?面试官气的让我出门左转
6 0
Swift-进阶 01:Swift源码编译
Swift-进阶 01:Swift源码编译
4 0
【字符串专场】只会使用库函数?面试官气的让我出门左转(下)
【字符串专场】只会使用库函数?面试官气的让我出门左转
5 0
Socket这样回答面试官还拿不到offer?
简介:对TCP/IP、UDP、Socket,套接字这些词你不会很陌生吧?随着网络技术的发展,这些词充斥着我们的耳朵。
5 0
Datawhale 零基础入门CV赛事-Task4 模型训练与验证
Datawhale 零基础入门CV赛事-Task4 模型训练与验证
5 0
+关注
芝麻软件
编程语言,框架相关专家
579
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载