bootstrap select下拉框模糊搜索

关键字

　　bootstrap-select 下拉框模糊搜索

正文（直接上源码）

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  3. <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.      <!-- 1-需要下载bootstap和bootstrap-select的css和js文件 -->
  8.     <link href="static/css/bootstrap.min.css?v=1" rel="stylesheet" />
  9.     <link rel="stylesheet" href="static/css/bootstrap/bootstrap-select.min.css" />
  10.     <script src="static/js/bootstrap.min.js"></script>
  11.     <script type="text/javascript" src="static/js/bootstrap/bootstrap-select.min.js"></script>
  12.  
  13.     <!-- 2-初始化选择框模糊搜索功能  -->>
  14.     <script type="text/javascript">
  15.         $(function(){
  16.             $(".selectpicker" ).selectpicker('refresh');
  17.         })
  18.  
  19.     </script>
  20. </head>
  21. <body>
  22.     <table id="table_report" class="table noline" style="width:900px">
  23.            <td style="width:80px;text-align: right;padding-top: 13px;"><em>*</em>供应商:</td>
  24.            <td>
  25.            <!-- 3-循环创建下拉搜索的option标签 -->
  26.            <!-- 4-注意select标签上的class="selectpicker show-tick form-control" data-live-search="true" -->
  27.                <select name="supplierId" id="supplierId" class="selectpicker show-tick form-control" data-live-search="true">
  28.                    <c:choose>
  29.                        <c:when test="${not empty supplierList}">
  30.                            <c:forEach items="${supplierList}" var="var" varStatus="vs">
  31.                                <option value="${var.supplyId}">${var.supplyName}</option>
  32.                            </c:forEach>
  33.                        </c:when>
  34.                    </c:choose>
  35.                </select>
  36.            </td>
  37.     </table>
  38. </body>
  39. </html>

总结

　　1-bootstrap-select的模糊搜索是针对服务器一次性返回全部数据的情况，在前端实现模糊搜搜

　　2-注意四步骤缺一不可

参考文献

1- https://www.cnblogs.com/zou1234/p/7891714.html

项目总结12：bootstrap-select下拉框模糊搜索的更多相关文章

  1. bootstrap select下拉框模糊搜索和动态绑定数据解决方法

    此方法适合后台一次性返回所有数据好了废话不多说直接上代码: <!DOCTYPE html><html><head> <title>Bootstrap-s ...

  2. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  3. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出（解决方案）

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  4. select下拉框左右变换

    效果图: 使用jQuery插件---multiselect2side做法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

  5. 基于Bootstrap的下拉框插件bootstrap-select

    写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...

  6. js如何获取select下拉框的value以及文本内容

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...

  7. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  8. jquery操作select下拉框的多种方法(选中,取值,赋值等)

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...

  9. Django forms表单 select下拉框的传值

    今儿继续做项目,学习了Django的forms生成前端的代码. forms.py class SignupForm(forms.Form): username = forms.CharField(va ...

随机推荐

  1. bcrelay广播包转发器

    https://www.mankier.com/8/bcrelay PPTP原是基于PPP的三层通信协议,加入bcrelay后可以将二层的广播包转发到PPTP的client端 在openwrt中实现的 ...

  2. 12.常用类简单介绍.md

    目录 1.Scanner类 2.System类 4.Object类和工具类 5.StringBuffer类和StringBuilder类 6.Math类 7.Random类和ThreadLocalRa ...

  3. servlet 3.1 摘录

    https://www.oschina.net/translate/non-blocking-io-using-servlet-3-1?cmp 非阻塞IO AsyncContext context = ...

  4. jq select 一些操作

    添加option $("#ID option").each(function(){if($(this).val()==111){$(this).remove();}}); 移除op ...

  5. Ubuntu下安装、激活并配置Pycharm

    Ubuntu下安装.激活并配置Pycharm 最近在学习Python这门语言,到了需要Python编译器学习的阶段,通过网上了解各个Python编译器的优缺点,最后选择了pycharm作为Python ...

  6. iptables禁止别人，允许自己

    这里举个例子,以ping为案例:禁止别人ping自己,但允许自己ping别人. [root@localhost ~]# iptables -A INPUT -p icmp --icmp-type 8 ...

  7. java.security.MessageDigest (2) 生成安全令牌!

    时候,我们需要产生一个数据,这个数据保存了用户的信息,但加密后仍然有可能被人使用,即便他人不确切的了解详细信息... 好比,我们在上网的时候,很多网页都会有一个信息,是否保存登录信息,以便下次可以直接 ...

  8. SpringBoot SpringSession redis SESSION

    号称无缝整合httpsession 共享, 但注意如果存在第三方框架,例如SESSION并发控制,这个是需要自己重写session名单的. 关于redis session 共享 的session并发控 ...

  9. app.use

    [app.use] app.use([path,] function [, function...]) Mounting a middleware at a path will cause the m ...

  10. Shader基础（渲染管线）

    Shader原理部分 渲染绘图管线流程:     1.顶点处理(坐标系的转换) 一个模型有自身的方向(前方,上方,右方等)和中心点,既本地坐标系: 将这个模型放到场景当中,通过场景中的世界坐标原点和世 ...