12/06/2020
Rumah Code

Autocomplete dengan bootstrap 4 dan CI 4

Pada tutorial kali ini rumah code akan membuat tutorial tentang bagaimana caranya membuat autocomplete dengan menggunakan bootstrap 4 dan codeigniter 4 dengan menggunakan plugin typeahead.js.

Pada artikel sebelum nya rumah code sudah membuat tutorial membuat autocomplete dengan menggunakan jQuery UI dengan menggunakan plugin autocomplete. Kali ini kita akan membahas pembuatan autocomplete dengan menggunakan bootstrap 4 dan codeigniter 4.

Plugin autocomplete yang akan di kita gunakan kali ini adalah twitter typeahead.js. Kenapa kita gunakan plugin ini ? Karena plugin ini compatible dengan bootstrap 4.

Mari kita mulai saja tutorial membuat autocomplete dengan menggunakan plugin typeahead.js dan codeigniter 4. Tapi sebelum memulai ada yang pelru teman teman ketahui terlebih dahulu bahwa tutorial ini di buat dengan merubah sedikit kodingan pada tutorial sebelum nya. Jadi kawan kawan harus membaca terlebih dahulu tutorial saya sebelumnya.

Pada tutorial ini saya melakukan perubahan pada file view auto.php. Perubahan yang saya lakukan adalah dengan merubahnya menjadi seperti kode di bawah ini

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Autocomplete dengan bootstrap 4 dan CI 4 @ Rumah Code [dot] ORG</title>

	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://twitter.github.io/typeahead.js/js/jquery-1.10.2.min.js"></script>
    <script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
	<link rel="stylesheet" href="https://twitter.github.io/typeahead.js/css/examples.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body style="background-color: #fff;padding-top: 5rem;">
<div class="col-sm-4">
          <input class="typeahead form-control" type="text" placeholder="Search">
</div>
<div id="hasil"></div>

<script>
            var user = new Bloodhound({
              datumTokenizer: Bloodhound.tokenizers.obj.whitespace('uid'),
              queryTokenizer: Bloodhound.tokenizers.whitespace,
              remote: {
                url: 'auto/list?term=%QUERY',
                wildcard: '%QUERY'
			
              }
            });
            user.initialize();
            $('.typeahead').typeahead({
                    hint: false,
               }, {
              name: 'email',
              display:'uid',
              source: user.ttAdapter(),
               limit: 3,
            }).on('typeahead:select', function(evt, item) {
			var a = 'Username :'+item.uid+'<br>'+'Email :'+item.email;
			$('#hasil').html(a);
			});
		

</script>
</body>
</html>

setelah itu saya juga mengganti isi file Controller Auto.php menjadi sperti kode di bawah ini

<?php namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\M_user;

class Auto
 extends Controller
{
    public function index()
    {    
        return view('auto');
    }
	public function list()
	{
		$model = new M_user();
		$request = \Config\Services::request();
		$id = $request->getPostGet('term');
		$user = $model->like('user_id', $id)->findAll();
		$w = array();
		foreach($user as $rt):
			$w[] = [
				"uid" => $rt['user_id'],
				"email" => $rt['user_email'],
			];
			
		endforeach; 
		echo json_encode($w);

		
	}		
}