JSF框架下使用searchableSelect实现搜索及级联功能

       searchableSelect.js插件可将select下拉框渲染为由div组成的一个具搜索功能的下拉框，该插件会将原生的select隐藏然后利用div及input实现一个新的下拉框，所以该插件不支持onchange事件，但是一般利用select都希望能够实现至少二级的联动，所以这插件尴尬了。

     最近刚好遇到项目上添加这个插件，但是却没有联动的效果，一百度才发现该插件不支持onchange事件，项目前端有用到jsf框架，没用该插件前级联效果是很不错的，主要代码如下：

     以上就是没有使用searchabeSelect插件时的代码，是不是很简单。

     接下来废话不多说，直接贴代码外加几句解释：

1.打开xx.xhtml

  页面修改代码如下：

 加载该控件js如下：

以上只是准备工作，<f:ajax>中的属性百度一下就可以知道其详细意思，我就不写了。

2.打开jquery.searchableSelect.js文件

 1)   写一个函数，例如我写的函数名为getselectItem，然后找到源码中的selectItem函数，复制并将其原封不动的粘贴到getselectItem函数中，注意参数也要复制过来，selectItem函数就如普通select标签的onchange事件，只是该事件仅仅将当前选中项添加到div中，新加的函数如下图：

   2) 找到buildItem函数，如下图将selectItem的调用换为getselectItem函数的调用，如果不换启动服务器的时候你会发现后台会一直刷新id=queryArea的组件，具体原因就是调用init的时候会在buildItem函数中调用selectItem，

 3) 为了方便操作id=queryProvince和id=queryArea的下拉框则应对应生成可唯一标志的具搜索功能的下拉框，方法为找到入口函数，将原本<h:selectOneMenu></..>的id塞进去，具体代码如下：

4)在selectItem函数中添加所需的onchange事件,例如我写的queryAreaList();

至此，该插件需修改的地方已经完成了。

3.回到xxx.xhtml文件

 实现queryAreaList()函数，该函数主要是实现commandButton中ajax异步刷新id=queryArea控件的操作，具体代码如下：

在xxxController.queryAreaList中添加AJAX.oncomplete("refeshArea()")（可在<f:ajax>中添加一个事件来代替，例如onevent=‘refreshArea()’），该函数会在ajax执行完成后去调用js的refreshArea()函数，调用该函数主要是为了更新插件的内容，具体代码如下：

至此，该简单操作已完成，听说bootstrap-select2可以直接实现级联和搜索功能，不过我没有测试过。

下载地址：百度一下可选择自己喜欢的版本，如没有下载到，可留言我分享下。