オートコンプリートにスクロールバーを表示する #jquery.ui

autocompleteで候補がたくさんあるときにスクロールバーを表示したかったので表示方法を調べたのでメモ書き。

main.js

$( function() {
    //console.time('timer1');
    var computerLanguages = [];
    for(var i = 1; i < 10001; i++) {
      computerLanguages.push('a' + i);
    }
    //console.log(computerLanguages);
    //console.timeEnd('timer1');
    $( '#jquery-ui-autocomplete-input' ) . autocomplete( {
        source: computerLanguages,
    } );
} );

index.html

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/redmond/jquery-ui.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/i18n/jquery-ui-i18n.min.js"></script>
  <script src="script/main.js"></script>
  <style>
<!--
.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
}
#jquery-ui-autocomplete label {
    float: left;
    margin-right: 0.5em;
    color: black;
    font-size: 15px;
}
-->
</style>
</head>
<div id="jquery-ui-autocomplete" class="ui-widget">
    <label for="jquery-ui-autocomplete-label">入力欄: </label>
    <input id="jquery-ui-autocomplete-input" />
</div>
</html>