Php Jquery Anlık Arama Otomatik Tamamlama R10+

Selamlar bir projemde anlık arama yapıyorum ancak bu anlık arama işleminde bana otomatik doldurma da lazım, Ekran görüntüsü;

Bunlardan birine tıklandığında arama inputu otomatik doldursun istiyorum.

Anlık arama işleminin yapıldığı php dosyası kodları;

<?php 
  
   include("admin/ayarlar/baglan.php");
   
   sleep(1);

  $value = $_POST["value"];
  
  if(!$value){
      
      echo "bir kelime girmeniz gerekiyor..";
      
  }else {
      
      
      $row = $db->prepare("select * from bolgeler where bolgeler_ad like ?");
      $row->execute(array("".$value."%"));
      $goster = $row->fetchAll(PDO::FETCH_ASSOC);
      $x = $row->rowCount();
      
       if($x){
           
           foreach($goster as $liste){
               
               echo "<a href='' onClick='tamamla(\"".$yaz["isim"]."\")'>".$liste["bolgeler_ad"]."</a><br />";
           }
           
       }else {
           
           echo "aradıgınız kelimeye ait hiç sonuc bulunamadı..";
           
       }
      
  }


?>

Şimdiden yardımcı olacak herkese teşekkürler.

jQuery Autocomplete şeklinde aratıp arastirirsaniz daha iyi sonuçlar alabilirsiniz.

Hocam açıkçası front-end bir çözüm arıyorum, yani javascriptte illa tıklandığında inputu dolduran bir fonksiyon vardır diye tahmin ediyorum.

tamamla fonksiyonunun kodlarını atar mısınız?

index.php kodum şu şekilde;

         <script type="text/javascript">  
  
  $(function(){
             
     $("#sonuc").hide();
     
     $("input[name=ara]").keyup(function(){
         
         var value  = $(this).val(); 
         var konu   = "value="+value;
         
         $.ajax({
             
             type: "post",
             url:   "ajax.php",
             data: konu, 
             beforeSend: function(){
                 
                $("#sonuc").fadeIn().html('<img src="https://i.hizliresim.com/Eg605Z.gif" width="20" height="20" />'); 
                 
             },
             
             success: function(sonuc){
                 
                $("#sonuc").show().html(sonuc);              
             }                                   
         });     
     });   
  });
</script>

Entegre etmem gereken ancak edemediğim kod;

function tamamla(al){//tamamla fonsiyonu çağırılınca gönderilen veriyi al

    $("#ara").val(al);//inputa koy

    $(".kelimeler").text("");//kelimeler clasına ait divi temizle

}

https://ustaderslik.com/konu/Jquery_-_Php_Otomatik_Arama_Tamamlama
Şu kaynaktan yapmaya çalıştım ancak yemedi.

$("input[name=ara]").val(al);

Bunu nereye koymam gerekli hocam?

$("#ara").val(al);//inputa koy
Şunu
$("input[name=ara]").val(al);
Şununla değiştirin hocam bakalım

Hocam oraya index.php ye koymam gerekip entegre edemediğim kodu koydum.
Yani şuanda
$("#ara").val(al);//inputa koy
Diye bir kod yok ki projede