我怎么可以设置滚动条可以多选择和动态自动完成serarch盒的jQuery

Question

我需要设置滚动条在多元选择和动态自动完成搜索在这里框我设置滚动条，但它不显示我的形象是

Answer 1

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

Answer 2

它就像一个过滤器搜索尝试以此为alternitive你不需要下拉：

Demo

// 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(); 
 
});

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

<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>

还我注意到你说你在哪里期运用magicsearch，所以我发现这些选项来定制它可能可以使用它们来设置高度：如果所有其他设置都不能减小结果的大小，我会在该设置中使用最大结果！

$('#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; 
    } 

});