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函数后,只要加上样式类就可以了。

使用案例

 










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

-完-