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

文檔說明

以電話号碼為例，做下總結

create: 允許增加下拉選項，輸入後按回車即可；

render：item和option的值需要使用HTML标簽進行格式化；

load： query為在輸入框輸入的值，需要注意的時，如果你輸入的值在之前就搜尋過，那麼它不會再執行該方法。

setValue(value, silent):  設定選中值，注意這個值必須已在下拉清單中；

setTextboxValue：　　設定文本框值，并非選中的值；

getValue()：　　　　    擷取選中的值；

focus()：　　　　 　　聚焦後下拉框自動展開；

clear()：　　　　　　清空選中

可以增加一個選項，也可增加一個數組，如果已經存在不會變化。此操作不會重新整理下拉框選項，需要使用refreshOptions() 進行重新整理