显示带有滚动条的jQuery自动完成功能中的所有列表

Question

我有带有滚动条的jquery自动完成功能，下面是示例，

当前情况是，当用户键入某些内容时，滚动条将显示，并且如果我删除之前键入的内容，则滚动条仍将显示。

我想要的是，当用户第一次不键入任何内容时，他们可以使用滚动条查看所有列表。

如何实现？

.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    width: 20px;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  html .ui-autocomplete {
    height: 100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

<input type="text" name="nature_business" id="nature_business" class="form-control" onkeyup="this.value = this.value.toUpperCase()" required="" value="">
<script type="text/javascript">
   $(function()
    {
        $( "#nature_business" ).autocomplete({
          source: ['aaa', 'aab', 'aac','bbb','ccc','ddd','asc','asa','asad'],
          minLength: 0,
          select: function(event, ui) {
            $('#nature_business').val(ui.item.label);
            $('#nature_business_ids').val(ui.item.value);  
            return false;
        },  
            change: function( event, ui ) {
            $("#nature_business_ids" ).val( ui.item? ui.item.value : 0 );
            if (ui.item == null || ui.item == undefined) {
                $("#nature_business").val("");
                if (!$(this).val()) {
            $(this).focus();
        }
            } else {
                $("#nature_business").attr("readonly", false);
            }
        }
        }); 
    });
</script>