很久沒(méi)寫jquery相關(guān)的內(nèi)容了。今天明河向大家推薦個(gè)相當(dāng)不錯(cuò)的模擬選擇框插件：Chosen。Chosen提供了suggest功能，強(qiáng)大的是實(shí)現(xiàn)了選項(xiàng)分組和多選關(guān)鍵詞處理。 

如何使用？
引入jquery庫(kù)和腳本
[code]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script>
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>
[/code]
選擇框html片段
[code]
<select class="chzn-select" data-placeholder="Choose a Country" style="width:350px;"tabindex="1">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
...
</select>
[/code]
初始化組件
[code]
$(".chzn-select").chosen();
[/code]
就這么簡(jiǎn)單。
Chosen使用技巧
如何設(shè)置模擬選擇框的默認(rèn)文本？
設(shè)置data-placeholder=”"，即可。
如果不存在data-placeholder，組件會(huì)自動(dòng)設(shè)置默認(rèn)文本為“Select Some Option”或“”Select Some Options”。
如何設(shè)置沒(méi)有搜索結(jié)果時(shí)顯示的文本？
[code]
$(".chzn-select").chosen({no_results_text: "沒(méi)有匹配結(jié)果"});
[/code]
如何給選項(xiàng)分組？
在html中增加optgroup標(biāo)簽。
[code]
<select data-placeholder="Your Favorite Football Teams" style="width:350px;" class="chzn-select" multiple tabindex="6">
<option value=""></option>
<optgroup label="NFC EAST">
<option>Dallas Cowboys</option>
<option>New York Giants</option>
<option>Philadelphia Eagles</option>
<option>Washington Redskins</option>
<optgroup>
<optgroup label="NFC NORTH">
<option>Chicago Bears</option>
<option>Detroit Lions</option>
<option>Green Bay Packers</option>
<option>Minnesota Vikings</option>
</optgroup>
</select>
[/code]
如何開(kāi)啟多選支持？
增加個(gè)多選屬性multiple
[code]
<select data-placeholder="Choose a Country" class="chzn-select" multiple style="width:350px;"tabindex="4">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
[/code]