Arama

<form class="trds-arama" role="search" action="#" method="get">
  <label class="trds-etiket trds-gorsel-gizli" for="ara">Sitede ara</label>
  <input class="trds-girdi trds-arama__girdi" id="ara" name="q" type="search" placeholder="Sitede ara" autocomplete="off">
  <button class="trds-button trds-arama__dugme" type="submit">Ara</button>
</form>

<div class="trds-arama-onerileri" data-trds="arama" data-kaynak-id="oneri-verisi">
  <form class="trds-arama" role="search" action="#" method="get">
    <label class="trds-etiket trds-gorsel-gizli" for="ara3">Hizmet, kurum veya belediye ara</label>
    <input class="trds-girdi trds-arama__girdi" id="ara3" name="q" type="search" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="ara3-liste" autocomplete="off" placeholder="Örnek: ikamet">
    <button class="trds-button trds-arama__dugme" type="submit">Ara</button>
  </form>
  <div class="trds-arama-onerileri__liste" id="ara3-liste" role="listbox" aria-label="Öneriler" hidden></div>
  <p class="trds-gorsel-gizli" data-trds-durum aria-live="polite"></p>
  <script type="application/json" id="oneri-verisi">{"gruplar": [{"ad": "Hizmetler", "ogeler": [{"ad": "İkametgâh Belgesi Sorgulama", "ek": "Nüfus ve Vatandaşlık İşleri Genel Müdürlüğü", "href": "#"}, {"ad": "Adli Sicil Kaydı Sorgulama", "ek": "Adalet Bakanlığı", "href": "#"}, {"ad": "Vergi Borcu Sorgulama ve Ödeme", "ek": "Gelir İdaresi Başkanlığı", "href": "#"}, {"ad": "SGK Tescil ve Hizmet Dökümü", "ek": "Sosyal Güvenlik Kurumu", "href": "#"}]}, {"ad": "Kurumlar", "ogeler": [{"ad": "Nüfus ve Vatandaşlık İşleri Genel Müdürlüğü", "href": "#"}, {"ad": "Adalet Bakanlığı", "href": "#"}]}, {"ad": "Belediyeler", "ogeler": [{"ad": "Ankara Büyükşehir Belediyesi", "href": "#"}, {"ad": "İzmir Büyükşehir Belediyesi", "href": "#"}]}]}</script>
</div>

<form class="trds-arama trds-arama--koyu" role="search" action="#" method="get">
  <label class="trds-etiket trds-gorsel-gizli" for="ara2">Hizmet ara</label>
  <input class="trds-girdi trds-arama__girdi" id="ara2" name="q" type="search" placeholder="Hizmet ara" autocomplete="off">
  <button class="trds-button trds-arama__dugme" type="submit">Ara</button>
</form>