Question

我正在使用带有过滤选项的bootstrap-multiselect https://github.com/davidstutz/bootstrap-multiselect。一切都很好。我的下拉有大约80-90的值，因此我必须提供滚动。但问题是当我添加滚动时，搜索框也会滚动，当我转到最后一个值时它会被隐藏。我需要确保搜索框保留在顶部，选项将在其下滚动。

所以我查看了bootstrap-multiselect创建的HTML代码，发现搜索控件也包含在同一个父代中。

<ul class="multiselect-container dropdown-menu" aria-expanded="false">
 <li class="multiselect-item filter" value="0" role="menuitem">
   <div class="input-group">
       <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input type="text" class="form-control multiselect-search" placeholder="Search">
      <span class="input-group-btn"><button type="button" class="btn btn-default multiselect-clear-filter"><i class="glyphicon glyphicon-remove-circle"></i></button></span>
 </div>
</li>
<li role="menuitem"><a tabindex="0"><label class="radio"><input type="radio" value=""> Please select</label></a></li>
<li class="multiselect-item multiselect-group" role="menuitem"><label>Test</label></li>
<li role="menuitem"><a tabindex="0"><label class="radio"><input type="radio" value="1"> Item 1</label></a></li>

</ul>

使用的CSS： -

ul.dropdown-menu {
    font-size: 1.1em;
    max-height: 300px;
    overflow: auto;
    z-index: 9999;
}

我可以使用任何CSS技巧并修复搜索框，选项会在其下滚动吗？我已经使用库提供的模板选项进行了检查，但没有取得任何成功？

由于

Answer 1

这是我在SO上的第一个答案，如果我在这里做错了什么，请告诉我

我最近通过以下方式实现了这一目标：

在CSS中，将“冻结在顶部”项目的位置设置为“固定”，并根据需要进行调整，以便在滚动下拉列表的展开部分时，其余项目在其后面不可见。
在multiselect的onDropdownShown事件中，调用一个函数（请参阅下面的小提琴中的resetDropdownHeight()），该函数将根据冻结的高度调整下拉列表的展开部分的高度项目
为了在过滤时保持正确的下拉高度，请修改bootstrap-multiselect.js中的buildFilter:函数，以便调用resetDropdownHeight()函数。如果正在使用可折叠选项组，请在$('li.multiselect-group > a', this.$ul)的点击事件中执行相同操作

我不清楚如何在示例小提琴中演示第3项（上图），所以这里是修改版本的bootstrap-multiselect.js中调用resetDropdownHeight()的地方：

buildFilter：
1.将其称为clearBtn.on事件的最后一行 2.将其称为this.searchTimeout

“点击”$('li.multiselect-group > a', this.$ul)的事件：
1.将其称为事件的最后一行

请在此处查看示例（仅包括＃1和＃2）：https://jsfiddle.net/mjh42/v3bc9udk/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"/>

        <script type="text/javascript" src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

        <style type="text/css">
            #freezeDemo + div.btn-group li.multiselect-filter {
                position: fixed;
                left: 1px; /* workaround for "position fixed" issue in Chrome desktop */
                top: 35px;
                width: 162px;
                z-index: 10;
                background-color: white;
            }

            #freezeDemo + div.btn-group li.multiselect-all {
                position: fixed;
                left: 1px; /* workaround for "position fixed" issue in Chrome desktop */
                top: 75px;
                width: 162px;
                z-index: 10;
                background-color: white;
                border-bottom: 1px solid;
            }

            #freezeDemo + div.btn-group ul.multiselect-container.dropdown-menu > li:not(.multiselect-filter):not(.multiselect-all) {
                position: relative;
                top: 65px;
            }

            #freezeDemo + div.btn-group ul.multiselect-container.dropdown-menu {
                top: 34px;
                width: 180px;
            }
        </style>
    </head>
    <body>
        <select id="freezeDemo" multiple="multiple">
            <optgroup label="Group A">
                <option value="A1">Item A1</option>
                <option value="A2">Item A2</option>
                <option value="A3">Item A3</option>
                <option value="A4">Item A4</option>
                <option value="A5">Item A5</option>
            </optgroup>
            <optgroup label="Group B">
                <option value="B1">Item B1</option>
                <option value="B2">Item B2</option>
                <option value="B3">Item B3</option>
                <option value="B4">Item B4</option>
                <option value="B5">Item B5</option>
            </optgroup>
        </select>

        <script type="text/javascript">
            var $_dropdownMenu = null;

            initializeBootstrapMultiselect();

            function initializeBootstrapMultiselect() {
                $('#freezeDemo').multiselect({
                    buttonWidth: '180px',
                    enableCollapsibleOptGroups: true,
                    includeSelectAllOption: true,
                    enableFiltering: true,
                    enableCaseInsensitiveFiltering: true,
                    maxHeight: 200,
                    onDropdownShown: function(event) {
                        resetDropdownHeight();
                    }
                });

                $_dropdownMenu = $('#freezeDemo + div.btn-group > button.multiselect.dropdown-toggle.btn.btn-default ~ ul.multiselect-container.dropdown-menu');
            }

            function resetDropdownHeight() {
                if ($_dropdownMenu !== null) {
                    $_dropdownMenu.css('height', 'auto');

                    var filterHeight = $('li.multiselect-filter', $_dropdownMenu).height();
                    var selectAllHeight = $('li.multiselect-all', $_dropdownMenu).height();

                    if (isNaN(filterHeight)) { filterHeight = 0 }
                    if (isNaN(selectAllHeight)) { selectAllHeight = 0 }

                    var heightAdjustment = filterHeight + selectAllHeight;
                    var currentDropdownHeight = $_filterDropdownMenu.height();
                    var newHeight = (currentDropdownHeight + heightAdjustment).toString() + 'px';

                    $_dropdownMenu.css('height', newHeight);
                }
            }
        </script>
    </body>
</html>

Answer 2

在jQuery中添加此模板模板：{

         ul: '<ul class="multiselect-container dropdown-menu" style="height:250px;overflow-y:scroll;"></ul>'
    }

更改bootstrap-multiselect布局

2 个答案: