zoukankan      html  css  js  c++  java
  • 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
        });
      })

  • 相关阅读:
    转】主流PHP框架间的比较(Zend Framework,CakePHP,CodeIgniter,Symfony,ThinkPHP,FleaPHP)
    总结 沉寂了大半年后的又一次
    xampp phpmyadmin产生403错误的解决办法
    Codeigniter 去除URL中的index.php
    【分享】C#中abstract与virtual的区别
    SQL Server 中使用Convert来取得datetime数据类型样式(全)
    Visual Studio 2012 RTM全系列简体中文正式版(附注册码)
    VS2008的Web.config、XML文件无法高亮显示的问题解决方案
    循环类里面的每一个属性
    Eclipse 打开已存在的Android项目的问题
  • 原文地址:https://www.cnblogs.com/iamDarren/p/4910013.html
Copyright © 2011-2022 走看看