2015/10/25 用bootstrap selectpicker實現帶模糊查詢的下拉列表

今天的時間比較寬松，就整理一下自己這兩天使用到的一個小插件功能吧，不求涉及太廣，只是為了自己更好的理解。

實現功能：下拉列表顯示人員列表，支持輸入關鍵字進行模糊查詢（人員列表通過數據庫查詢得到）
1、java代碼：Controller
　　@RequestMapping(value = "list.do", method = RequestMethod.GET)
　　public ModelAndView listUser(){
　　　　ModelAndView mav = new ModelAndView("url");
　　　　//這里只是一個接口的調用，后台的實現通過hibernate查詢數據庫，返回Employee列表， EmployeeQueryBean是一個查詢條件Bean
　　　　List<Employee> queryEmployeeByQueryParams = employeeService.queryEmployeeByQueryParams(new EmployeeQueryBean());
　　　　mav.addObject("result",queryEmployeeByQueryParams );
　　　　return mav;
　　}

2、jsp
引入插件：<script type="text/javascript" src = "../bootstrap-select/js/defaults-zh_CN.js"/>

　　　　　<script type="text/javascript" src = "../bootstrap-select/js/bootstrap-select.js"/>

　　　　　<script type="text/javascript" src = "../bootstrap-select/css/bootstrap-select.css"/>

　　　　　<div class = "form-group">
　　　　　　　　//col-xs-2：bootstrap 網格系統將頁面分為12列，其中的數字用來指定寬度
　　　　　　　　<label class = "col-xs-2 control-lable">人員列表：</label>
　　　　　　　　<div class = "col-xs-5">
　　　　　　　　　　//selectpicker:這是使用了一個bootstrap下拉插件
　　　　　　　　　　//data-live-search：設置為查找輸入框
　　　　　　　　　　<select name = "user" class = "form-control selectpicker show-tick" data-live-search = "true" >
　　　　　　　　　　//jstl這里使用forEach循環動態讀取數據庫返回的數據，然后動態添加選項
　　　　　　　　　　<c:forEach items = "${result}" var = "co">
　　　　　　　　　　　　<option value = "${co.id}">${co.name}</option>
　　　　　　　　　　</c:forEach>
　　　　　　　　　</div>
　　　　　</div>

3、js文件
　　$(function(){
　　　　//啟動Bootsrap-Select
　　　　$(".selectpicker").selectpicker({
　　　　　　dropuAuto : false
　　　　});
　　})