- bootstrap-select普通的模糊查询按照如下方式便可,在select标签中增加**class=“selectpicker” data-live-search=“true” **
<select class="selectpicker" data-live-search="true" id="game" name="game">
<c:forEach items="${games}" var="ga">
<option value="${ga.id}">${ga.name}</option>
</c:forEach>
</select>
- 如果是动态添加数据,如下所示。则需要添加 ( " . s e l e c t p i c k e r " ) . s e l e c t p i c k e r ( ′ r e f r e s h ′ ) ; 和 (".selectpicker").selectpicker('refresh');和 (".selectpicker").selectpicker(′refresh′);和(".selectpicker").selectpicker(‘render’);
$.each(data.tasks, function (index, value) {
arr += "<option value=\'" + value.taskId + "\'>" + value.taskName + "</option>";
});
$("#taskName").append(arr);
$(".selectpicker").selectpicker('refresh');
$(".selectpicker").selectpicker('render');
},
- 如果整个select框是动态添加的,我们不能沟通过clone的方式进行clone某个含有bootstrap-select的select框(我使用不可以clone),如下方式是不行的
$('#channel_container').append($('#channel_model').children().clone(true));//clone导致bootstrap-select模糊查询失效
我们可以通过append方式进行动态添加,如下所示:
$('.channel_container').append('<div class="row channel_model">\n' +
' <div class="span4">\n' +
' <input type="hidden" name="channelId" id="channelId">\n' +
' <label class="control-label col-md-1">渠道:</label>\n' +
' <div class="channel">\n' +
' <select class="selectpicker" data-live-search="true" >\n' +
' <c:forEach items="${customerForms}" var="item">\n' +
' <option value="${item.customerId}">${item.name}</option>\n' +
' </c:forEach>\n' +
' </select>\n' +
' </div>\n' +
' </div>\n' +
' <div class="span4">\n' +
' <label for="demandAmount" class="control-label col-md-1">需求数量:</label>\n' +
' <div class="demandAmount">\n' +
' <input name="demandAmount" type="text" id="demandAmount"/>\n' +
' </div>\n' +
' </div>\n' +
' <button class=\' btn btn-default span1\' onclick="removeChannel(this)" type=\'button\'><span\n' +
' class=\'icon-trash\'></span></button>\n' +
' </div>');
$(".selectpicker").selectpicker('refresh');
$(".selectpicker").selectpicker('render');