7、bootstrap-select下拉搜索框

bootstrap里好用的插件还真不少，bootstrap-select是一个新发现，项目中的普通下拉框数量已经达到了500多条，不加搜索功能太麻烦了。
1、github地址：
　　http://silviomoreto.github.io/bootstrap-select/
2、引入jquery，引入bootstrap-select 和 bootstrap 的 js和css文件

<script src="<%=basePath%>js/jquery.js"></script>
<!-- 引入jquery select -->
<script type="text/javascript" src="<%=basePath%>bootstrap-select/bootstrap-select.js"></script>  
<link rel="stylesheet" type="text/css" href="<%=basePath%>bootstrap-select/bootstrap-select.css">

<!-- 引入bootstrap -->
<link href="<%=basePath%>bootstrap/bootstrap.min.css" rel="stylesheet">  
<script src="<%=basePath%>bootstrap/bootstrap.min.js"></script>  

3、增加select下拉框

<div class="eachline">  
    <div class="inputadd1">  
        <div class="inputadd1_1">
          <label>数据列表：</label>
        </div>
        <div class="inputadd1_2">
            <select id="dataIdSelect" name="dataid" class="selectpicker show-tick form-control"
                data-live-search="true" required>
            </select>  
        </div>
    </div>  
</div>

4、在工具类中写了一个工具的方法来获取组装option

getAllDataIdList: function(basePath, dataId) {
    $.ajax({
        type : 'get',
        url : basePath + 'dataController/getAllDataIdList/',
        async : true,
        success : function(result) {
            var str = '<option value="" disabled>请选择</option>';
            for(var i = 0;i<result.length;i++) {
                str+='<option value="'+result[i].dataid+'">'+result[i].memo+'</option>';
            }
            $('#dataIdSelect').html(str);
            if(dataId != '') {
                $('#dataIdSelect').selectpicker('val', dataId);
            }
            $('#dataIdSelect').selectpicker('refresh');
        }
    });
},

注意：
　　（1）组装好option之后需要手动刷新select，要不添加了也显示不出来。
　　　　$('#dataIdSelect').selectpicker('refresh');

image.png
如果要以编程方式更新select，首先操作select，然后使用refresh方法更新UI以匹配新的状态。 删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。

（2）为select指定初始值的方法：
　　　　$('#dataIdSelect').selectpicker('val', dataId);