Aranabilir liste

<div class="trds-alan" data-trds="aranabilir">
  <label class="trds-etiket" for="il-ara">İl</label>
  <p class="trds-yardim" id="il-ara-yardim">Yazmaya başlayın ve listeden seçin.</p>
  <div class="trds-aranabilir">
    <input class="trds-girdi" id="il-ara" name="il" type="text" role="combobox" aria-expanded="false" aria-controls="il-liste" aria-autocomplete="list" autocomplete="off" aria-describedby="il-ara-yardim">
    <ul class="trds-aranabilir__liste" id="il-liste" role="listbox" aria-label="İller" hidden>
      <li role="option" id="il-01" data-deger="01">Adana</li>
      <li role="option" id="il-06" data-deger="06">Ankara</li>
      <li role="option" id="il-07" data-deger="07">Antalya</li>
      <li role="option" id="il-16" data-deger="16">Bursa</li>
      <li role="option" id="il-21" data-deger="21">Diyarbakır</li>
      <li role="option" id="il-27" data-deger="27">Gaziantep</li>
      <li role="option" id="il-32" data-deger="32">Isparta</li>
      <li role="option" id="il-34" data-deger="34">İstanbul</li>
      <li role="option" id="il-35" data-deger="35">İzmir</li>
      <li role="option" id="il-42" data-deger="42">Konya</li>
      <li role="option" id="il-63" data-deger="63">Şanlıurfa</li>
    </ul>
  </div>
  <p class="trds-aranabilir__durum trds-gorsel-gizli" aria-live="polite"></p>
</div>