Selectize是一个可扩展的基于jQuery 的自定义下拉框的UI控件。它对展示标签、联系人列表、国家选择器等比较有用。它的大小在~ 7kb（gzip压缩）左右。提供一个可靠且体验良好的干净和强大的API。
文档：https://github.com/selectize/selectize.js
selectize属性会添加到原始的<select> / <input>元素上-该属性指向基础Selectize实例。
配置选项 描述 类型 默认值 options 下拉框中显示的选项 array [ ] itmes 默认选中的选项 array [ ] delimiter 默认选中的选项 string ‘,’ maxItems 多选的时候设置最大选择数量，不设置则为多个选择 number valueField 按照元素的属性值进行取值 ,默认用取id的值 string labelField 按照元素的属性值在下拉框中显示，如果属性值相同只显示一个 string searchField 筛选选项时要分析的属性名称数组。 create true下拉option中没有输入的内容会出现Add+输入的内容，false则只能在已有的option中选择，不允许添加。 boolean persist true对于使用create方式添加的option会添加到select标签下面进行保留。false，create方式添加的option只是显示在选框中，不会进行保留。 boolean 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属性，在渲染下拉列表时调用 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+$'
} ) ;
属性名称 描述 options 包含整个选项池的对象。该对象由每个对象的值作为键。 items 所选值的数组。
$ ( '#money' ) [ 0 ] . selectize. items
$ ( '#money' ) [ 0 ] . selectize. options
方法名称 描述 addOption(data) 添加一个可用选项或选项数组。如果已经存在，将不会发生任何事情。注意：这不会刷新选项列表下拉列表（为此使用refreshOptions()）。 updateOption(value, data) 更新一个可供选择的选项。如果在所选项目或选项下拉列表中可见，它将自动重新渲染。 removeOption(value) 删除由给定值标识的选项。 clearOptions(silent) 从控件中删除所有选项。并重置/清除所有选定项。 如果silent为真，则不会在原始 input 上触发更改事件 getOption(value) 检索由给定值标识的选项的jQuery元素。 getAdjacentOption(value, direction) 相对于当前突出显示的选项，检索上一个或下一个选项的jQuery元素。direction对于“下一个” ，参数应为1；对于“上一个” ，参数应为-1。 refreshOptions(triggerDropdown) 刷新自动完成下拉菜单中显示的可用选项列表。triggerDropdown为true(默认)会展开可用选项，为false则不展开
$ ( ".selectize" ) . selectize ( ) ;
$ ( "#money" ) [ 0 ] . selectize. clearOptions ( ) ;
$ ( "#money" ) [ 0 ] . selectize. addItem ( "" ) ;
$ ( "#money" ) [ 0 ] . selectize. addOption ( { value : 123 , text : '金额' } ) ;
方法名称 描述 clear(silent) 重置/清除控件中所有选定的项目。如果silent为真，则不会在原始输入上触发任何更改事件。 getItem(value) 返回与给定值匹配项目的jQuery元素。 addItem(value, silent) “选择”一个项目。将其添加当前选中的列表中。如果silent为真，则不会在原始输入上触发任何更改事件。 removeItem(value, silent) 移除与提供的值匹配的选定项。 如果silent为真，则不会在原始输入上触发更改事件。 createItem(value, [triggerDropdown], [callback]) 设置新的选中项。该方法将会调用Selectize设置中提供的create方法。 refreshItems() 重新渲染选定的项目列表。
$ ( ".selectize" ) . selectize ( ) ;
$ ( "#stuMajor" ) [ 0 ] . selectize. clear ( ) ;
方法 描述 addOptionGroup(id, data) 注册一个新的optgroup以便将选项存储到其中。该id参数指的是optgroupField设置所标识的选项中属性的值。 removeOptionGroup(id) 删除单个选项组。 clearOptionGroups() 删除所有现有的选项组。
方法 描述 on(event, handler) 添加一个事件监听器。 off(event, handler) 删除事件监听器。 off(event) 删除所有事件侦听器。 trigger(event, …) 触发事件监听器。
$ ( '#department' ) [ 0 ] . selectize. on ( 'dropdown_open' , function ( ) {
} ) ;
方法 描述 open() 显示包含可用选项的自动完成下拉列表。 close() 关闭自动完成下拉菜单。 positionDropdown() 计算并应用下拉菜单的适当位置。
方法 描述 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
var $select = $ ( '#select-tools' ) . selectize ( ) ;
var control = $select[ 0 ] . selectize;
control. clear ( ) ;
control. clearOptions ( ) ;
control. addOption ( {
id : 4 ,
title : 'Something New' ,
value : '120'
} ) ;
control. setValue ( [ "time" , 'data' ] ) ;
如下例子中，点击item是会进行跳转到相关页面的。
$ ( '#select-links' ) . selectize ( {
theme : 'links' ,
maxItems : null ,
valueField : 'id' ,
searchField : 'title' ,
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 : '#'
} ;
}
} ) ;
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' ) ,
} ) ;
searchField 中的值，一般对应 load 方法中返回的 res 中的值，否则将匹配不上，导致 load 中返回数据后，下拉框不会展开 $ ( '#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 ) ) ;
}
} ) ;
}
} ) ;
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 = [ ] ;
var items = [ ] ;
teacherAssocOption[ 'id' ] = result. id;
teacherAssocOption[ 'code' ] = result. code;
teacherAssocOption[ 'nameZh' ] = result. person ? result. person. nameZh : '' ;
teacherAssocOptions. push ( teacherAssocOption) ;
items. push ( result. id) ;
initTeacherForIndex ( $ ( '#teacherAssoc' ) , teacherAssocOptions, items) ;
}
} ) ;
} else {
initTeacherForIndex ( $ ( '#teacherAssoc' ) , [ ] , [ ] )
}
}
manageTeacherAssoc ( ) ;
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) ;
function destroySelectize ( $thisTr ) {
var valArr = [ ] ;
$thisTr. find ( 'select.selectize' ) . each ( function ( ) {
selectizeValArr. push ( $ ( this ) . val ( ) ? $ ( this ) . val ( ) : null )
$ ( this ) [ 0 ] . selectize. destroy ( ) ;
} ) ;
return valArr ;
}
function initSelectize ( $thisTr, valArr ) {
$thisTr. find ( '.selectize' ) . each ( function ( i ) {
$ ( this ) . selectize ( ) ;
if ( selectizeValArr && selectizeValArr. length) {
this . selectize. setValue ( selectizeValArr[ i] ) ;
}
} ) ;
}
问题形成原因是因为，插件自动给input框一个样式style="width: 4px; left: -10000px; opacity: 0; position: absolute;"导致滚动条滚动。
$ ( '.right-table td' ) . mouseover ( function ( ) {
if ( $ ( this ) . find ( 'input' ) . length) {
$ ( this ) . find ( 'input' ) . css ( 'left' , 0 )
}
} ) ;
< selectname = " " id = " selectize" > < optionvalue = " " > </ option> < optionvalue = " 1" disabled > </ option> < optionvalue = " 2" > </ option> </ select>
$ ( "#educationAssoc" ) [ 0 ] . selectize. on ( 'change' , function ( val ) {
clearAdminClassAssoc ( val) ;
} ) ;
$ ( '#educationAssoc' ) [ 0 ] . selectize. on ( 'item_add' , function ( val ) {
console. log ( val)
} )
$ ( '.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 ? '确定要删除 ' + values. length + ' 个选项吗?' : '确定要删除 "' + values[ 0 ] + '"?' ) ;
}
} ) ;
需要使用jquery ui
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < linkrel = " stylesheet" href = " ./css/stylesheet.css" > < linkrel = " stylesheet" href = " ./css/normalize.css" > < linkrel = " stylesheet" href = " ./css/selectize.default.css" > < linkrel = " stylesheet" href = " ./css/jquery-ui.css" > </ head> < body> < divclass = " control-group" > < labelfor = " input-sortable" > </ label> < inputtype = " text" id = " input-sortable" class = " input-sortable demo-default" value = " drag,these,items,around" > </ div> < scriptsrc = " ./js/jquery.min.js" > </ script> < scriptsrc = " ./js/selectize.js" > </ script> < scriptsrc = " ./js/jquery-ui.js" > </ script> < script>
$ ( '.input-sortable' ) . selectize ( {
plugins : [ 'drag_drop' ] ,
persist : false ,
create : true
} ) ;
</ script> </ body> </ html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
