全屏输入自动完成-打开iOS键盘时如何调整大小

Question

我有这个带有自动完成列表的输入示例（没有javascript）

https://jsfiddle.net/Dudis/2aeucdmg/16/

对于移动测试，您可以使用以下链接进行尝试：https://jsfiddle.net/Dudis/2aeucdmg/16/show

单击输入时，自动完成功能将全屏显示并在iOS上打开键盘。然后，iOS键盘将覆盖列表的一部分，这不是必需的-如果没有键盘，则该列表应在屏幕的一部分中完整显示。当我们隐藏键盘时，该列表应该会扩展，并且在全屏上也完全可见。

如何做到这一点？

HTML代码以下：

$("input").focus(function() {
    	$(".wrapper").addClass('focus');
    	$(".autocomplete").addClass('focus');
    	$("ul").addClass('focus');
      $(".autocomplete").show();
    })

* {
    -webkit-overflow-scrolling: touch;
}

    .site {
      position: relative;
    }
    
    
    .wrapper {
      position: absolute;
      width: 100%;
    }
    
    .wrapper.focus {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 101;
      display: block;
    }
    
    input {
        cursor: pointer;
        border: 1px solid #BFC5CF;
        background-color: white;
        font-size: 1rem;
        height: 52px;
        width: 100%;
    }
    
    .autocomplete {
      position: relative;
      z-index: 10;
      background: white;
      width: 100%;
      display:none;
    }
    
    .autocomplete.focus {
      position: relative;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      display: block;
      overflow-y: scroll;
    }
    
    ul.focus {
      -webkit-overflow-scrolling: touch;
      width: 100%;
      background: white;
      max-height: none;
      vertical-align: baseline;
      position: fixed;
      height: 100%;
      overflow: auto;
    }
    
    ul li {
      cursor: pointer;
      display: flex;
      text-decoration: none;
      padding: 8px;
      color: black;
      min-height: 20px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='site'>
      <h1>
         Test Site
      </h1>
      <div class='wrapper'>
        <input id='list' type='text' placeholder='search'/>
        <label for='list'>
          Choose list
        </label>
        <div class='autocomplete'>
          <ul>
            <li>text 0</li>
            <li>text 1</li>
            <li>text 2</li>
            <li>text 3</li>
            <li>text 4</li>
            <li>text 5</li>
            <li>text 6</li>
            <li>text 7</li>
            <li>text 8</li>
            <li>text 9</li>
            <li>text 10</li>
            <li>text 11</li>
            <li>text 12</li>
            <li>text 13</li>
            <li>text 14</li>
            <li>text 15</li>
            <li>text 16</li>
            <li>text 17</li>
            <li>text 18</li>
            <li>text 19</li>
            <li>text 20</li>
            <li>text 21</li>
            <li>text 22</li>
            <li>text 23</li>
            <li>text 24</li>
            <li>text 25</li>
            <li>text 26</li>
            <li>text 27</li>
            <li>text 28</li>
            <li>text 29</li>
            <li>text 30</li>
            <li>text 31</li>
            <li>text 32</li>
            <li>text 33</li>
            <li>text 34</li>
            <li>text 35</li>
            <li>text 36</li>
            <li>text 37</li>
            <li>text 38</li>
            <li>text 39</li>
          </ul>
        </div>
      </div>
    </div>

CSS：

一些JS可以展开到全屏并打开列表：