脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 使用bootstrap实现下拉框搜索功能

使用bootstrap实现下拉框搜索功能的实例讲解

 更新时间：2018年08月10日 09:11:12   作者：回归心灵  
今天小编就为大家分享一篇使用bootstrap实现下拉框搜索功能的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

背景

公司的小二后台有一个下拉框选择经销商的功能，由于选择的经销商过多，因此添加搜索功能。

前提

配置好Bootstrap相关的开发环境

主要内容

<div class="form-group">
 <label class="col-sm-3 control-label" for="state">经销商信息</label>
 <div class="col-sm-3">
  <select name="dealer_id" id="dealer_id" class="selectpicker show-tick form-control" data-width="98%" data-first-option="false" title='请选择经销商(必选)' required data-live-search="true">
  <#foreach dealer in dealerList>
  <option value="${dealer.id?c}">${dealer.name!}</option>
  </#foreach>
  </select>
 </div>
</div>

其中最主要的是select标签中的两个属性： class=”selectpicker show-tick form-control” 和 required data-live-search=”true” 。数据展示中foreach是模版引擎freemarker的循环遍历列表语句，当然测试时，您可以列几个option标签数据。

效果图：

以上这篇使用bootstrap实现下拉框搜索功能的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Google 爬虫如何抓取 JavaScript 的内容

    Google 爬虫如何抓取 JavaScript 的内容

    我们测试了谷歌爬虫是如何抓取 JavaScript，下面就是我们从中学习到的知识,需要的朋友可以参考下
    2017-04-04
  • 微信小程序WebSocket实现聊天对话功能

    微信小程序WebSocket实现聊天对话功能

    这篇文章主要为大家详细介绍了微信小程序WebSocket实现聊天对话功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • JavaScript调试工具汇总

    JavaScript调试工具汇总

    这篇文章主要介绍了7款基于桌面和WEB的JavaScript调试工具，更有效地处理动态类型使应用程序更符合编码标准，不管你是新学习javascript的菜鸟还是业界大神，都非常的有用。
    2014-12-12
  • JS封装的选项卡TAB切换效果示例

    JS封装的选项卡TAB切换效果示例

    这篇文章主要介绍了JS封装的选项卡TAB切换效果,结合实例形式分析了javascript响应鼠标事件动态操作页面元素属性实现tab切换的相关技巧,需要的朋友可以参考下
    2016-09-09
  • 减少访问DOM的次数提升javascript性能

    减少访问DOM的次数提升javascript性能

    访问修改DOM元素都会导致浏览器重新计算页面的几何变化，下面为大家介绍下javascript性能提升方法,需要的朋友可以参考下
    2014-02-02
  • 测试JavaScript字符串处理性能的代码

    测试JavaScript字符串处理性能的代码

    主要是测试了数组 push()方法与直接相加这两种在JS引擎上性能的实际处理情况。程序代码简单明了，没什么好解释的。
    2009-12-12
  • 详解webpack中的hash、chunkhash、contenthash区别

    详解webpack中的hash、chunkhash、contenthash区别

    这篇文章主要介绍了详解webpack中的hash、chunkhash、contenthash区别，详细的介绍了hash、chunkhash、contenthash的用法和区别，有兴趣的可以了解一下
    2018-01-01
  • 对采用动态原型方式无法展示继承机制得思考

    对采用动态原型方式无法展示继承机制得思考

    今天看书，作者讨论到能否采用动态原型方法展示继承机制，给出的答案是：不能。原因是prototype对象的唯一性。看下面代码（这段代码不正确，却值得研究）
    2009-12-12
  • js插件实现图片滑动验证码

    js插件实现图片滑动验证码

    这篇文章主要为大家详细介绍了js插件实现图片滑动验证码，滑动模块，实现验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • JS获取网页图片name属性的方法

    JS获取网页图片name属性的方法

    这篇文章主要介绍了JS获取网页图片name属性的方法,涉及javascript操作图片属性的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04

最新评论