在Bootstrap的下拉菜单中加上搜索的功能

1.首先引入bootstrap的js文件，这里不再赘述

2.编辑select标签

<form:select id="brand" path="brand.id" class="selectpicker show-tick input-medium required" data-live-search="true" onchange="getmodels();" required="required">
	<option>---请选择---</option>
</form:select>

注意：实现select控件可搜索的关键属性是：

      （1）class="selectpicker show-tick input-medium required"

      （2）data-live-search="true"

3.使用js给select控件动态添加选项

//此函数向select控件添加参数
$.getJSON("${ctx}/business/brand/getBrands_",{"type":$("#type").val()}, function(activateCodeLibs){
	$("#brand").empty().append("<option value=''>----请选择----</option>");
	$.each(activateCodeLibs, function(i,item){
		if(item.id==$("#brandId").val()){
			$("#brand").append("<option value='"+item.id+"' selected=selected>"+item.name+"</option>");
		}else{
			$("#brand").append("<option value='"+item.id+"'>"+item.name+"</option>");
		}
	});
        //此处刷新selectpicker，否则动态添加选项之后select控件仍然不会显示选项
	$('#brand').selectpicker('refresh');
});

4.selectpicker默认宽度是auto，会根据下拉菜单的内容变化，这样会造成其他元素的排版混乱。所以初始化selectpicker的时候给固定宽度width：

<script type="text/javascript">
    $(function(){
	    $("#brand").selectpicker({
        //设置控件宽度为165px
		width:165
	});
});
</script>