PHP bootstrap input otomatik doldurma mysql / Javascript / ajax

Mehmet Ali

Üzerine çalıştığım bir işte input alanı için birim girişi gerekliydi. Daha önce kaydı varsa kullanıcıya gösterecek yoksa kullanı girecek. Otomatik tamamlama sayfa yenilenmeden farklı sayfa açmadan input altında öneriler yer alıyor.

             
 <input autocomplete="off"  name="birim" type="text" class="form-control" id="birim" 
    placeholder="" value="<?php echo $personel["birim"]; ?>" required="">
 <div id="birimListesi"></div>


getir.php


if (isset($_POST['gorevi']) ) {

          $output = "";
        //metin kutusundan alınan veri
          $gorevi = temizle($_POST["birim"]);
        /* ------- Metni arayacak bir sql sorgusu. Kendinize göre düzenleyin */
        
        $query = $db->prepare("SELECT birim FROM (select distinct birim from tablo) 
        as t where birim like '%$birim%' limit 5");
        $query->execute(); 
        $result = $query->fetchAll(PDO::FETCH_ASSOC); 

          $output = '<ul class="list-unstyled">';        

          if ($result) {
               foreach( $result as $row ){ 
                  $output .= '<li>'.ucwords($row['birim']).'</li>';
              }
          }else{
                $output .= '<li> birim bulunamadı.</li>';
          }
          
          $output .= '</ul>';
          echo $output;
    }

stil css

 
<style>

ul{
      margin-top: 0px;
      background: gray;
      color: #000;
      }
    li{
      padding: 12px;
      cursor: pointer;
      color: black;
      border: 1px
      }
    li:hover{
      background: #f0f0f0;
      }
</Style>



<script type="text/javascript">
$(document).ready(function(){
                $("#birim").on("keyup", function(){
                var birim = $(this).val();
                 if (birim !=="") {
                  $.ajax({
                     url:"getir.php",
                    type:"POST",
                    cache:false,
                    data:{birim:birim},
                    success:function(data){
                       $("#birimListesi").html(data);
                      $("#birimListesi").fadeIn();
                    }  
                  });
                }else{
                   $("#birimListesi").html("");  
                  $("#birimListesi").fadeOut();
                }
              });

              $("#birimListesi").on("click","li", function(){
                $('#birim').val($(this).text()); 
                 $('#birimListesi').fadeOut("fast");
              });
          });
</script>

Benzer Gönderiler