2015/10/25 用bootstrap selectpicker实现带模糊查询的下拉列表

缺乏、安全感 2021-12-24 15:25 165阅读 0赞

今天的时间比较宽松，就整理一下自己这两天使用到的一个小插件功能吧，不求涉及太广，只是为了自己更好的理解。

实现功能：下拉列表显示人员列表，支持输入关键字进行模糊查询（人员列表通过数据库查询得到）  
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/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  
　　　　\});  
　　\})

转载于:https://www.cnblogs.com/iamDarren/p/4910013.html