BootStrap下拉框，添加模糊搜索

来源：互联网发布：华为荣耀4x手机套淘宝编辑：程序博客网时间：2024/06/06 04:13

Html代码：

<label  class="col-sm-1 control-label">添加附件1:</label><div class="col-md-2 mail-attach">    <select  name="props[0].pid"  class="selectpicker show-tick form-control"  data-first-option="false"  required data-live-search="true">        <option value="0"> 请选择</option>        <#if propertys?? && propertys?size gt 0>            <#list propertys as property>                <option value="${property.PropertyID?c}">${property.PropertyName}</option>            </#list>        </#if>    </select>    <input type="text" maxlength="10" name="props[0].pnum" class="form-control" data-rule="integer(+);" placeholder="输入数量"></div>

option也可以自己写几个枚举值,这里比较重要的是：

   class="selectpicker show-tick form-control"  data-first-option="false"  required data-live-search="true"

   是必须要有的
另外还需要引入bootstrap的几个包如下：
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.js">

 <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css">

当然也可以自己去下载这些，然后放入项目中，在引入即可。这里给的会自动根据这个网址去下载依赖的包。这样就完成了，支持模糊搜索，有什么疑问，留言答复，也研究了很久，效果图如下 ：

阅读全文

0 0