码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-10-26 00:34:57      阅读:1814      评论:0      收藏: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/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
    });
  })

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

标签:

原文地址:http://www.cnblogs.com/iamDarren/p/4910013.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!