使用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实现下拉框搜索功能的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS实现简易换图时钟功能分析
这篇文章主要介绍了JS实现简易换图时钟功能,结合实例形式分析了javascript结合时间函数定时变换显示图片实现时钟功能的相关操作技巧,代码中备有较为详尽的注释便于理解,需要的朋友可以参考下
2018-01-01
JS如何循环遍历JSON数据
这篇文章主要介绍了JS如何循环遍历JSON数据的方法,本文提供了 JS 循环 JSON 数据列,以及 JS 循环遍历 JSON 数据的例子,需要的朋友可以参考下
2024-01-01
老生常谈JavaScript中的this关键字
相对于很多其他的面向对象语言来说，this代表的就是当前对象。本篇文章通过实例给大家介绍js中的this关键字，感兴趣的朋友一起看看吧
2016-10-10
js算法实例之字母大小写转换
实现javascript 英文首字母大写有多种方法,下面这篇文章主要给大家介绍了关于js算法实例之字母大小写转换的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12
jquery ajax应用中iframe自适应高度问题解决方法
很多管理系统中，都使用iframe进行信息内容的展示方式，或者作为主菜单的链接展示内容。使用iframe的问题就是自适应高度的问题
2014-04-04
uniapp地图组件(map)使用与遇到的一些问题总结
uniapp是用vue.js开发所有前端应用的框架,开发人员只需要编写一套代码就可以发布到安卓、iOS、H5和小程序、快应用等平台,下面这篇文章主要给大家介绍了关于uniapp地图组件(map)使用与遇到的一些问题,需要的朋友可以参考下
2022-07-07
兼容IE和Firefox的javascript获取iframe文档内容的函数
兼容IE和Firefox的javascript获取iframe文档内容的函数，需要的朋友可以参考下。
2011-08-08
JS获取地址栏参数的几种方法小结
本篇文章主要是对JS获取地址栏参数的几种方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
JavaScript枚举选择jquery插件代码实例
这篇文章主要介绍了JavaScript枚举选择jquery插件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
js中toString()函数与valueOf()函数使用与区别
在等于运算符中，如果比较的内容包含对象类型数据，则会涉及隐式转换，那么就会调用toString()函数和valueOf()函数，本文主要介绍了 js中toString()函数与valueOf()函数使用与区别，感兴趣的可以了解一下
2022-04-04