Selectize使用總結

一、簡介

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

 

四、未解決問題

1.  無法賦值

　在使用多個Selectize輸入框，初始化時為其設置默認值，遇到使用setvalue導致setTextboxValue出錯，無法正常顯示文本值

//telephoneSelectize.setValue('12345678', true); telephoneSelectize.setTextboxValue('1111');