我怎麼可以設置滾動條可以多選擇和動態自動完成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; 
    } 

});