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

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

bootstrap-select使用示例:

bootstrap-select文档说明:

bootstrap-select使用参考博客:

 

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

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

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

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

具体实现如下:

 1、引入相关文件:

<head> <!-- 引入 Bootstrap样式 --> <link href="http://www.likecs.com/${pageContext.request.contextPath}/resources/css/bootstrap.min.css"> <!-- bootstrap-select样式 --> <link href="http://www.likecs.com/${pageContext.request.contextPath}/resources/css/select/bootstrap-select.min.css"> <!-- jQuery (Bootstrap 依赖于 jQuery) --> <script src="http://www.likecs.com/${pageContext.request.contextPath}/resources/js/jquery-3.0.0.min.js"></script>
<!-- Bootstrap --> <script src="http://www.likecs.com/${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script> <!-- Bootstrap-select 控件 --> <script src="http://www.likecs.com/${pageContext.request.contextPath}/resources/js/select/bootstrap-select.min.js"></script> <script src="http://www.likecs.com/${pageContext.request.contextPath}/resources/js/select/defaults-zh_CN.min.js"></script>

</head>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgyfwg.html