如何将滚动条设置为Multiple Select和Dynamic Autocomplete serarch box jquery

Question

我需要在此处设置一个滚动条到多选和动态自动填充搜索框我设置了滚动条，但它没有显示我的图像

Answer 1

滚动条在那里，问题是下拉部分太大（并且被剪掉）以至于不需要滚动条。您需要限制下拉列表的最大高度。

Answer 2

尝试将其作为替代品，就像过滤搜索一样，您不需要下拉：

Demo

＆＃13;

＆＃13;

// Angular

var phonecatApp = angular.module('app', []);

phonecatApp.controller('ListCtrl', function ($scope) {
    $scope.items = [{
        'name': 'Item 1'
    }, {
        'name': 'Item 2'
    }, {
        'name': 'Account 3'
    }, {
        'name': 'Account 4'
    }, {
        'name': 'Item 5'
    }, {
        'name': 'Item 6'
    }, {
        'name': 'User 7'
    }, {
        'name': 'User 8'
    }, {
        'name': 'Item 9'
    }, {
        'name': 'Item 10'
    }, {
        'name': 'Item 11'
    }, {
        'name': 'Item 12'
    }, {
        'name': 'Item 13'
    }, {
        'name': 'Item 14'
    }, {
        'name': 'User 15'
    }, {
        'name': 'User 16'
    }, {
        'name': 'Person 17'
    }, {
        'name': 'Person 18'
    }, {
        'name': 'Person 19'
    }, {
        'name': 'Item 20'
    }, ];
});

// jQuery
$('.dropdown-menu').find('input').click(function (e) {
    e.stopPropagation();
});

＆＃13;

.dropdown.dropdown-scroll .dropdown-menu {
    max-height: 200px;
    width: 60px;
    overflow: auto;
}
.search-control {
    padding: 5px 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown dropdown-scroll" ng-app="app">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Select<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-controller="ListCtrl">
        <li role="presentation">
            <div class="input-group input-group-sm search-control"> <span class="input-group-addon">
              <span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
            </div>
        </li>
        <li role="presentation" ng-repeat='item in items | filter:query'> <a href="#"> {{item.name}} </a>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

我也注意到你说你在哪里使用magicsearch所以我发现这些选项可以自定义它也许你可以使用它们来设置hieght：如果所有其他方法都没能减少，那么你可以在那个设置中获得最大结果结果的大小！

 $('#basic').magicsearch({

   // array or string or function or url (for AJAX)
   dataSource: [],       

   // 'ajax'  
  type: '',

  // ajax options
   ajaxOptions: {},

   // unique id
  id: '',  

  // generate input[type="hidden"]?
  hidden: false, 

  // string or array to search through
  fields: '',  

   // data format           
  format: '',   

   // input format
  inputFormat: '',

  // max number of results
  maxShow: 5, 

  // clear the input when no option is selected
  isClear: true,

  // show selected options
  showSelected: true,

  // show dropdown button
  dropdownBtn: false,

  // max number of results in the dropdown
  dropdownMaxItem: 8,

   // multiple select
  multiple: false, 

  // true = no limit
   maxItem: true,

   // show multiple skins
  showMultiSkin: true,

   // multiple styles
    multiStyle: {},

  // multiple fields
  multiField: '', 

  // show on focus
  focusShow: false,

  // text when no results
  noResult: '',

  // custom skin
  skin: '', 

  // callbacks
  disableRule: function(data) {
  return false;
  },
  success: function($input, data) {
      return true;
  },
  afterDelete: function($input, data) {
  return true;
  }

});