项目总结12：bootstrap-select下拉框模糊搜索

时间：2020-12-29 18:03:25

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

相关文章