PHP - Bootstrap autocomplete tokenfield with Ajax

Dalam posting ini, saya berbagi dengan teman-teman bagaimana membuat tokenfield autocomplete dengan ajax di PHP. Saya akan memberikan contoh yang sangat sederhana sehingga Anda dapat dengan mudah menggunakan Proyek PHP inti dan kerangka kerja lainnya seperti Laravel, Codeigniter dll.

Disini dalam contoh ini kita menggunakan plugin tokenfield Bootstrap untuk tag ajax autocomplete. tokenfield plugin adalah advanced tagging / tokenizing plugin untuk jQuery dan Twitter Bootstrap dengan fokus pada dukungan keyboard dan copy-paste. Plugin tokenfield juga menyediakan julukan untuk tag autocomplete, Tapi contoh ini saya menggunakan jquery ui untuk ajax autocomplete.

Dalam contoh ini saya menggunakan file berikut untuk css dan js dengan cara itu kita dapat membuat contoh sederhana:

Penggunaan Dasar

1.  Buat File Index.php

2.  Muat library jQuery dan CSS yang dibutuhkan dan kerangka Bootstrap pada file index.php

<!-- Css Files-->
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">

  <!-- JS Files -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>

 3.  Aktifkan plugin, dan masukan  di mana pengguna akan melihat daftar data yang didefinisikan dalam JavaScript pada file index.php

<div class="container">
     <input type="text" class="form-control" id="tokenfield" />
  </div>

 4. Masukkan AJAX di index.php

<script type="text/javascript">
  $('#tokenfield').tokenfield({
    autocomplete: {
      source: function (request, response) {
          jQuery.get("exute.php", {
              query: request.term
          }, function (data) {
              data = $.parseJSON(data);
              response(data);
          });
      },
      delay: 100
    },
    showAutocompleteOnFocus: true
  });
</script>

 5. Buat file exute.php

<?php

 define (DB_USER, "root");
 define (DB_PASSWORD, "root");
 define (DB_DATABASE, "test");
 define (DB_HOST, "localhost");

 $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);

 $sql = "SELECT name FROM tags 
   WHERE name LIKE '%".$_GET['query']."%'
   LIMIT 10"; 

 $result = $mysqli->query($sql);

 $json = [];
 while($row = $result->fetch_assoc()){
      $json[] = $row['name'];
 }

 echo json_encode($json);
?>

Sekarang membuka browser Anda dan menjalankan link ini: http: // localhost: 8000
Anda bisa mendapatkan informasi lebih lanjut tentang plugin tokenfield bootstrap dari sini: Tokenfield.
Semoga, dari artikel ini bisa membantu teman-teman untuk bisa mengembakan diri.