Chosen：用戶友好的 select 下拉框列表組件

用戶體驗真是一門很深的學問。為了讓網頁用起來更方便舒服，很多時候我們都要花費額外的功夫去做原生 HTML 組件無法完成的效果。

比如 <select> 標籤，默認情況下它會在瀏覽器顯示一個下拉選擇框。當選擇項過多的時候，比如下面“選擇國家”的例子（全世界有 200 多個國家），下拉框會很長，並且會出現滾動條，用戶不得不去滾動鼠標費力尋找自己需要的選項，這無形間就造成了操作阻礙。很明顯，下面右圖的方式通過一個搜索輸入框，簡化了尋找的過程，極大方便了用戶，提升了體驗。

另一個例子，仍是關於 <select> 標籤。它有一個屬性叫 multiple，可以讓我們一次選中多個選項，一起提交。

<select name="country" multiple>
    <option value="United States">United States</option> 
    <option value="United Kingdom">United Kingdom</option> 
    ...
</select>

默認情況下，在瀏覽器中它會長成下圖左邊的樣子，同樣面臨著選項過多產生滾動條的問題。右邊這張圖所展示的手法我們應該也經常見到，它將多選問題轉化為了“打標籤”的形式，也是通過輸入框幫用戶過濾出想找的選項，減輕了用戶的心理壓力和篩選成本。

說了這麼多，其實這樣的前端富交互應用組件可以很容易地通過一個叫 Chosen 的 jQuery 插件實現。

一、用法

1. 下載插件源碼：https://github.com/harvesthq/chosen
2. 調用插件：

$(".chzn-select").chosen();

是不是很簡單？ chosen 插件將 HTML 中原來的 select 控件隱藏了起來，將一個用 javascript 模擬出來的控件顯示給用戶，並且會將選中的值自動填回隱藏的表單項中。我們都不用擔心瀏覽器禁用了 javascript，插件會平滑 fallback。

二、與 Bootstrap 風格一致

我已經習慣了使用 Twitter Bootstrap 前端框架來寫 HTML 網頁，不過 chosen 的下拉框樣式與 Bootstrap 並不統一。不用擔心，有高人單獨為 chosen 寫了 css 樣式，稍微改改就一致了。

訪問項目 https://github.com/alxlit/bootstrap-chosen

這哥們用 less 寫的樣式，需要編譯一下才能得到 css 樣式表。如果你使用的就是默認的 Bootstrap 主題樣式，那麼可以參考我已經編譯好的版本。

Enjoy~

三、總結

每一個 PHP 程序員上輩子都是折翼的前端、美工和系統管理員。