Chosen—强大的jquery模拟选择框插件

Chosen提供了suggest功能，强大的是实现了选项分组和多选关键词处理。

如何使用？

引入jquery库和脚本

<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>

选择框html片段

<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>

初始化组件

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

Chosen使用技巧

如何设置模拟选择框的默认文本？
设置data-placeholder=”"，即可。
如果不存在data-placeholder，组件会自动设置默认文本为“Select Some Option”或“”Select Some Options”。
如何设置没有搜索结果时显示的文本？

$(".chzn-select").chosen({no_results_text: "没有匹配结果"});

如何给选项分组？
在html中增加optgroup标签。

<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>

如何开启多选支持？
增加个多选属性multiple

<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>