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