位置:主页 > 互联网技术 >

使用bootstrap-select控件 搜索栏键入关键字动态获取后台数据,

作者:admin时间:2018-12-31

使用bootstrap-澳门百家乐select控件 搜索栏键入关键字动态获取后台数据,

bootstrap-select开源地址:https://github.com/silviomoreto/bootstrap-select

bootstrap-select使用示例:http://silviomoreto.github.io/bootstrap-select/examples/

bootstrap-select文档说明:http://silviomoreto.github.io/bootstrap-select/options/

bootstrap-select使用参考博客:http://www.cnblogs.com/landeanfen/p/7457283.html

 

该控件依赖于Bootstrap前端框架;

该控件的具体用法请看上述链接;

该控件其中的一个用法是可以对select标签的选项进行搜索,从而获得精准的选项,毕竟选项可能很多;

如今我想通过在搜索栏键入关键字,动态获得后台传入的选项数据,而不是一次性读取所有数据再进行搜索;

具体实现如下:

 

 1、引入相关文件:

<head>
     <!-- 引入 Bootstrap样式 -->
      <link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
     <!-- bootstrap-select样式 -->
      <link href="${pageContext.request.contextPath}/resources/css/select/bootstrap-select.min.css" rel="stylesheet">

     <!-- jQuery (Bootstrap 依赖于 jQuery) -->
      <script src="${pageContext.request.contextPath}/resources/js/jquery-3.0.0.min.js"></script>
<!-- Bootstrap --> <script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script> <!-- Bootstrap-select 控件 --> <script src="${pageContext.request.contextPath}/resources/js/select/bootstrap-select.min.js"></script> <script src="${pageContext.request.contextPath}/resources/js/select/defaults-zh_CN.min.js"></script>

</head>

 

  2、select标签

   

<form id="addForm" action="${pageContext.request.contextPath}/admin/authority/manager/saveAdd" method="post">
   <div >    
       <div >     
          <span  >管理员</span>
           <!--触发bootstrap-select需添加 搜索功能需添加data-live-search="true" -->
          <select data-size="6"  data-live-search="true"   id="select-manager" name="managerName"                data-selectNameUrl="${pageContext.request.contextPath}/admin/authority/managerRole/getManagerByName" >    
          </select>
       </div>
   </div>
   <div >    
       <div >         
          <span  >角&nbsp;&nbsp;&nbsp;&nbsp;色</span>
          <select   data-size="6" data-live-search="true"  id="select-role"  name="roleName"  > 
             <c:forEach var="selectRole" items="${selectRoles}" varStatus="statu">
                <option    value ="${selectRole.id}"  >${selectRole.roleName}</option>
             </c:forEach>
          </select>
       </div>
   </div>
</form>

 

   到这步为止,管理员的select标签下,我没有添加任何的<option></option>标签,所以选项为空

       效果图:

     

 

 

   效果如下图:AAAAAAA>  

 

http://www.bkjia.com/jQuery/1229147.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/1229147.htmlTechArticle使用bootstrap-select控件 搜索栏键入关键字动态获取后台数据, bootstrap-select开源地址: https://github.com/silviomoreto/bootstrap-select bootstrap-select使用...

本文源自: 凯发娱乐

上一篇:jQuery3.0的domManip浅析,jquery3.0dommanip

下一篇:没有了

互联网技术

联系我们