Автозаполнение полноэкранного ввода - как настроить размер при открытии клавиатуры 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, чтобы развернуть на полный экран и открыть список: