Chosen 是select下拉框美化插件,它能让丑陋的、很长的select选择框变的更好看、更方便。此外,还可以搜索查找下拉选项。它可对列表进行分组,同时也可禁用某些选择项。
sp190826_114507
chosen插件依赖于jQuery库或prototype,使用之前要先引入jQuery或prototype。我使用的是chosen1.5.1版本的,要求jQuery1.7,支持IE8+(IE7及以下版本会优雅降级)。

插件使用

引入jquery插件和chosen插件,对需要美化的下拉框执行chosen函数:$(selector).chosen(options)。可以把selector写成样式类,这样执行完chosen函数后,只要加上样式类就可以了。

使用案例

<head> 
<meta charset="utf-8"> 
<link href='https://cdn.bootcss.com/chosen/1.5.1/chosen.min.css' rel='stylesheet'/>
<style>
.w-country{width:100px;}
</style>
<script src='https://code.jquery.com/jquery-1.9.0.js'></script>
<script src='https://cdn.bootcss.com/chosen/1.5.1/chosen.jquery.js'></script>
<script>
$(function(){
 $('.chosen').chosen({
 no_results_text: "没有找到结果!",//搜索无结果时显示的提示 
       search_contains:true,   //关键字模糊搜索。设置为true,只要选项包含搜索词就会显示;设置为false,则要求从选项开头开始匹配
        allow_single_deselect:true, //单选下拉框是否允许取消选择。如果允许,选中选项会有一个x号可以删除选项
        disable_search: false, //禁用搜索。设置为true,则无法搜索选项。
        disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。
        inherit_select_classes: true, //是否继承原下拉框的样式类,此处设为继承
        placeholder_text_single: '选择国家', //单选选择框的默认提示信息,当选项为空时会显示。如果原下拉框设置了data-placeholder,会覆盖这里的值。
        width: '400px', //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度,也会被width覆盖。
        max_shown_results: 1000, //下拉框最大显示选项数量
        display_disabled_options: false,
        single_backstroke_delete: false, //false表示按两次删除键才能删除选项,true表示按一次删除键即可删除
        case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感
        group_search: false, //选项组是否可搜。此处搜索不可搜
        include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示,true显示。默认false。
   });
   $('.chosen2').chosen({
        search_contains:false, 
        enable_split_word_search: true //分词搜索,选项词可通过空格或'[]'分隔。search_contains为false时才能看出效果
   });
});
</script>
</head>
<body>
<select class='chosen w-country' data-placeholder='请选择国家' multiple >
  <option value=""></option>
  <option value="China">中国</option>
  <option value="US">US</option>
  <option value="England">英国</option>
  <option value="Canada">加拿大</option>
  <option value="Cube">古巴</option>
</select>
<br/><br/>
<select class='chosen'>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>
<br/><br/>
<select class='chosen2' >
  <option value=""></option>
  <option value="vegetable">西红柿 黄瓜 芹菜</option>
  <option value="fruit">葡萄 草莓 芭乐[潘石榴]</option>
</select>
</body>

上面第三个输入框输入“黄瓜”会匹配到结果,但输入“瓜”没有匹配的结果。这是因为禁用模糊搜索并开启了分词搜索,可以从词开头开始匹配。词的边界是空格,“黄瓜”前面有空格,而”瓜“前面无空格。

-完-