bootstrap select下拉框模糊搜索

关键字

　　bootstrap-select 下拉框模糊搜索

正文（直接上源码）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>

<html lang="en">

<head>

     <!-- 1-需要下载bootstap和bootstrap-select的css和js文件 -->

    <link href="static/css/bootstrap.min.css?v=1" rel="stylesheet" />

    <link rel="stylesheet" href="static/css/bootstrap/bootstrap-select.min.css" />

    <script src="static/js/bootstrap.min.js"></script>

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

    <!-- 2-初始化选择框模糊搜索功能  -->>

    <script type="text/javascript">

        $(function(){

            $(".selectpicker" ).selectpicker('refresh');

        })

    </script>

</head>

<body>

    <table id="table_report" class="table noline" style="width:900px">

           <td style="width:80px;text-align: right;padding-top: 13px;"><em>*</em>供应商:</td>

           <td>

           <!-- 3-循环创建下拉搜索的option标签 -->

           <!-- 4-注意select标签上的class="selectpicker show-tick form-control" data-live-search="true" -->

               <select name="supplierId" id="supplierId" class="selectpicker show-tick form-control" data-live-search="true">

                   <c:choose>

                       <c:when test="${not empty supplierList}">

                           <c:forEach items="${supplierList}" var="var" varStatus="vs">

                               <option value="${var.supplyId}">${var.supplyName}</option>

                           </c:forEach>

                       </c:when>

                   </c:choose>

               </select>

           </td>

    </table>

</body>

</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. LeetCode 题解 56. Merge Intervals

    题目大意:给出一组区间,合并他们. 首先是排序,首先看start,start小的在前面.start相同的话,end小的在前面. 排序以后,要合并了. 我自己的笨方法,说实在的问题真的很多.提交了好几次 ...

  2. OC copy mutableCopy, 浅拷贝，深拷贝

    copy与mutableCopy都是深拷贝,区别是mutableCopy拷贝出的对象是可变的. OC对象基本都是通过指针访问,所以一般情况下,通过对指针的赋值都是浅拷贝,即只是拷贝了一份对象的指针,对 ...

  3. android 环境变量

    1.新建一个环境变量和系统变量名称为ANDROID_HOME,变量值为当前安装SDK的目录 2.把%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools添 ...

  4. es6初级之箭头函数实现隔行变色

    无论是使用哪种方式实现隔行变色的效果,它的思路都是一样的: 1.定义很多个div 2.给div 加背景 3.鼠标移动到div上时,当前div 背景变色 4.鼠标移出div时,当前div背景恢复 以上4 ...

  5. CC攻击与DDOS攻击区别

    二者的攻击方式主要分为三种:直接攻击.代理攻击.僵尸网络攻击 CC攻击是DDOS(分布式拒绝服务)的一种,相比其它的DDOS攻击CC似乎更有技术含量一些.这种攻击你见不到虚假IP,见不到特别大的异常流 ...

  6. Object-c 协议@protocol（@required、@optional）

    一.什么是协议? 1.协议声明了可以被任何类实现的方法2.协议不是类,它是定义了一个其他对象可以实现的接口3.如果在某个类中实现了协议中的某个方法,也就是这个类实现了那个协议.4.协议经常用来实现委托 ...

  7. React之使用Context跨组件树传递数据

    ---------------------------------  讲解一 原文:https://blog.csdn.net/xuxiaoping1989/article/details/78480 ...

  8. 计算机网络协议包头赏析-IP

    上次和大家聊了聊以太网的帧格式,本文会讲解IP数据报格式的定义. == 开门见山,先上图: 任何一个IP数据报都是由首部和数据两部分组成,而且首部基本是固定长度的,长度为20字节.这一点很重要,其他都 ...

  9. ArcGIS案例学习笔记-找出最近距离的垂线

    ArcGIS案例学习笔记-找出最近距离的垂线 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 目的:对于任意矢量要素类,查找最近距离并做图 数据: 方法: 0. 计算 ...

  10. Java学习01 (第一遍)

    java se - 桌面 java ee - 网页 Jdk :Jre 区别Jdk-开发环境必要Jre-运行环境需要Jdk包含Jre,安装完Jdk就可以了 Javac Demo1.java-Javac ...