我通过快速搜索实现了一次多选,以过滤多选数据,但是我的多选框上方出现了一个按钮下拉菜单,我使用了codeigniter,quicksearch(来自https://github.com/DeuxHuitHuit/quicksearch)和多选
图片: error quicksearch shows a dropdown select
这是我的代码:
html:
<div class="selector">
<div class="row">
<h2 class="card-inside-title">Estudios</h2>
<select id="estudios" class="searchable" name="estudios[]" multiple="multiple">
<?
foreach($tipoestudios as $tipoestudio)
{
echo '<optgroup label="'.$tipoestudio->nombre.'">';
$catestudios = $this->m_estudios->obt_CatEstudios($tipoestudio->id);
foreach($catestudios as $catestudio)
{
echo '<option value="'.$catestudio->id.'">'.$catestudio->nombre.'</option>';
}
echo '</optgroup>';
}
?>
</select>
</div>
</div>
javascript:
<script type="text/javascript">
$(document).ready(function() {
$('#estudios').multiSelect({
selectableOptgroup: true,
selectableHeader: "<input type='text' ' class='search-input' autocomplete='on' placeholder='buscar'>",
selectionHeader: "<input type='text' class='search-input' autocomplete='on' placeholder='buscar'>",
afterInit: function(ms){
var that = this,
$selectableSearch = that.$selectableUl.prev(),
$selectionSearch = that.$selectionUl.prev(),
selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
that.qs1 = $selectableSearch.quicksearch(selectableSearchString,{
'show': function () {
$(this).prev(".ms-optgroup-label").show();
$(this).show();
},
'hide': function () {
$(this).prev(".ms-optgroup-label").hide();
$(this).hide();
}
})
.on('keydown', function(e){
if (e.which === 40){
that.$selectableUl.focus();
return false;
}
});
that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
.on('keydown', function(e){
if (e.which == 40){
that.$selectionUl.focus();
return false;
}
});
},afterSelect: function(){
this.qs1.cache();
this.qs2.cache();
},
afterDeselect: function(){
this.qs1.cache();
this.qs2.cache();
}
});
});
</script>