使用bootstrap實現下拉框搜索功能的實例講解

來源：懂視網責編：小采時間：2020-11-27 22:10:20

使用bootstrap實現下拉框搜索功能的實例講解

使用bootstrap實現下拉框搜索功能的實例講解:背景公司的小二后臺有一個下拉框選擇經銷商的功能，由于選擇的經銷商過多，因此添加搜索功能。前提配置好Bootstrap相關的開發環境主要內容 <div class=form-group> <label class=col-sm-3 control-label for

推薦度：

點擊下載本文 文檔為doc格式

導讀使用bootstrap實現下拉框搜索功能的實例講解:背景公司的小二后臺有一個下拉框選擇經銷商的功能，由于選擇的經銷商過多，因此添加搜索功能。前提配置好Bootstrap相關的開發環境主要內容 <div class=form-group> <label class=col-sm-3 control-label for

背景

公司的小二后臺有一個下拉框選擇經銷商的功能，由于選擇的經銷商過多，因此添加搜索功能。

前提

配置好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標簽數據。

效果圖：