带搜索功能的下拉框select

柔光的暖阳◎ 2022-08-01 13:46 1406阅读 0赞

[Chosen][] 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。

先来看下插件的效果：

跟这个比起来，原来的select样式是不是弱爆了！

马上来武装我们的select吧：

1、先把js和css文件引用到网页里面去：

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> </td> 
   <td> <p>&lt;link&nbsp;href="js/jqueryUI/chosen/chosen.css"&nbsp;type="text/css"rel="stylesheet"&nbsp;/&gt;</p> <p>&lt;script&nbsp;type="text/javascript"&nbsp;src="js/jquery.1.4.4.min.js"&gt;&lt;/script&gt;</p> <p>&lt;script&nbsp;type="text/javascript"&nbsp;src="js/jqueryUI/chosen/chosen.jquery.js"&gt;&lt;/script&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

2、创建一个select元素，如下：

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;</p> </td> 
   <td> <p>&lt;select&nbsp;name="dept"&nbsp;style="width:&nbsp;150px;"&nbsp;id="dept"&nbsp;class="dept_select"&gt;&nbsp;&nbsp;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="部门1"&gt;部门1&lt;/option&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="部门2"&gt;部门2&lt;/option</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="部门3"&gt;部门3&lt;/option&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="部门4"&gt;部门4&lt;/option&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="部门5"&gt;部门5&lt;/option&gt;</p> <p>&lt;/select&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

3、然后在js中调用Chosen定义的方法：

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;</p> <p>&nbsp;</p> </td> 
   <td> <p>$(function(){ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;$('.dept_select').chosen();</p> <p>});</p> </td> 
  </tr> 
 </tbody> 
</table>

4、搞定收工，屌丝立马变成高富帅有木有~

### chosen插件的一些设置项: ###

1、默认文字选项

你可以在select元素上添加data-placeholder属性定义默认文字，也就是在没有选择选项的情况下，显示的文字。

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;</p> </td> 
   <td> <p>&lt;select&nbsp;data-placeholder="选择部门"&nbsp;style="width:150px;"&nbsp;class="dept_select"&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="-1"&gt;&lt;/option&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="部门1"&gt;部门1&lt;/option&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="部门2"&gt;部门2&lt;/option&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="部门3"&gt;部门3&lt;/option&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="部门4"&gt;部门4&lt;/option&gt;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;option&nbsp;value="部门5"&gt;部门5&lt;/option&gt;</p> <p>&lt;/select&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

这里还要注意一点，要想显示出默认文字，select下的第一个选择项必须为空的option。

2、对其方式  
选项文字默认是左对齐的，可以在class属性中加入“chzn-rtl”来设置右对齐：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;select&nbsp;data-placeholder="选择部门"&nbsp;class="dept_select&nbsp;chzn-rtl"&nbsp;style="width:150px;"&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

3、JS参数设置

在调用chosen()方法时，我们可以设置一些参数：

<table> 
 <tbody> 
  <tr> 
   <td> <p>选项</p> </td> 
   <td> <p>描述</p> </td> 
  </tr> 
  <tr> 
   <td> <p>no_results_text</p> </td> 
   <td> <p>无搜索结果显示的文本</p> </td> 
  </tr> 
  <tr> 
   <td> <p>allow_single_deselect</p> </td> 
   <td> <p>是否允许取消选择</p> </td> 
  </tr> 
  <tr> 
   <td> <p>max_selected_options</p> </td> 
   <td> <p>当select为多选时，最多选择个数</p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;</p> </td> 
   <td> <p>$(".some_select").chosen({ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;/*max_selected_options:&nbsp;2,*/</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;no_results_text:&nbsp;"没有找到",</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;allow_single_deselect:&nbsp;true</p> <p>});</p> </td> 
  </tr> 
 </tbody> 
</table>

4、事件

a) change事件：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p>$(".dept-select").chosen().change(function(){ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;//do&nbsp;something...</p> <p>});</p> </td> 
  </tr> 
 </tbody> 
</table>

b) 当我们需要动态更新select下的选择项时，该怎么办呢？只要在更新选择项后触发Chosen中的liszt:updated事件就可以了：

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;</p> </td> 
   <td> <p>//...$(".dept-select").html('...&lt;option&gt;部门6&lt;/option&gt;...');</p> <p>$(".dept-select").trigger("liszt:updated");</p> </td> 
  </tr> 
 </tbody> 
</table>

其他问题：

1、如果不想要搜索框的话，很简单，用css把它隐藏掉就OK了：

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;</p> </td> 
   <td> <p>.chzn-container-single&nbsp;.chzn-search&nbsp;{ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none;</p> <p>}</p> </td> 
  </tr> 
 </tbody> 
</table>

2、做为天朝的程序猿，不得不考虑ie6和ie7下的情况。好吧，用ie6打开一看，select还是一副屌丝样!

翻看chosen.jquery.js发现在chosen方法中有如下一段，ie6和ie7直接返回select对象本身：

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;</p> </td> 
   <td> <p>if&nbsp;($.browser.msie&nbsp;&amp;&amp;&nbsp;($.browser.version&nbsp;===&nbsp;"6.0"&nbsp;||&nbsp;($.browser.version&nbsp;===&nbsp;"7.0"&nbsp;&amp;&amp;&nbsp;document.documentMode&nbsp;===&nbsp;7)))&nbsp;{ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this;</p> <p>}</p> </td> 
  </tr> 
 </tbody> 
</table>

把这段js注释掉，重新打开ie6和7，不再屌丝了有木有！虽然箭头图片和搜索图片不透明不和谐(用js处理下就和谐了)。。。

终于能高高兴兴地在ie6使用了，尼玛过了会又发现问题了，还是坑爹的ie6和7！如果2个select在一起又不和谐了，请看：

点开选择部门，尼玛这是闹哪样！见图：

好吧，这应该是z-index的问题，把css修改下，结果各种div各种z-index改到吐血还是这副死样子。

最 后没办法了，想了个笨办法，动态改变所有chzn-container的z-index，在点击select的时候让当前container 的z-index最高，让其他select的chzn-container的z-index变低。在chosen.jquery.js中找到此方法：

将此方法改为：

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;</p> </td> 
   <td> <p>Chosen.prototype.activate_field&nbsp;=&nbsp;function()&nbsp;{ </p> <p>&nbsp;&nbsp;&nbsp;&nbsp;this.container.addClass("chzn-container-active");</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;this.active_field&nbsp;=&nbsp;true;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;this.search_field.val(this.search_field.val());</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;zindex&nbsp;=&nbsp;1010;</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;this.container.css('z-index','1010')</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;$('.chzn-container').not(this.container).css('z-index',--zindex);</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this.search_field.focus();</p> <p>};</p> </td> 
  </tr> 
 </tbody> 
</table>

当然，你也可以在生成.chzn-container的时候按顺序赋予不同的z-index，这样就可以不用每次点击select都要重新设一遍了。

至此，ie6和ie7下使用Chosen基本没什么问题了。。。

[Chosen]: http://harvesthq.github.com/chosen/