使用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、引入相关文件：

　

  2、select标签

   

   
class="form-group">    
       
class="input-group">     
          class="input-group-addon" >管理员
           
          class="form-control selectpicker show-tick" data-live-search="true" title="请输入管理员"  id="select-manager" name="managerName"                data-selectNameUrl="${pageContext.request.contextPath}/admin/authority/managerRole/getManagerByName" >    
          
       
   
   
class="form-group">    
       
class="input-group">         
          class="input-group-addon" >角    色
          class="form-control selectpicker show-tick" data-size="6" data-live-search="true"  id="select-role"  name="roleName" title="请选择角色" > 
             
                ${selectRole.roleName}
             
          
       
   

 

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

       效果图：

     

 

     现在我要实现的是，在搜索栏中一键入字符就触发事件：动态获得后台数据来添加标签；

     如今遇到的问题是，搜索栏是bootstrap-select控件生成的，无法事先知道怎么选择该搜索栏以触发事件，

     解决方法是调用chrome的开发者模式，发现了bootstrap-select控件生成的标签，如下图所示：

    

   

    知道了bootstrap-select 生成的搜索栏相关标签和属性，就可以通过选择该搜索栏触发事件；

 

3、触发事件：

 

 

   效果如下图：

  

 

转载于:https://www.cnblogs.com/kenhome/p/7660573.html