码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap-select下拉框模糊搜索

时间:2018-11-16 13:23:45      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:stl   efi   tab   bootstra   type   com   返回   idt   供应商   

 

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

bootstrap-select下拉框模糊搜索

标签:stl   efi   tab   bootstra   type   com   返回   idt   供应商   

原文地址:https://www.cnblogs.com/wobuchifanqie/p/9968568.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!