Membuat Autocomplete dari database dengan Codeigniter

Hello para developer web framework codeigniter sekarang yang saya mau berbagi bagaimana membuat Autocomplete dari database dengan Codeigniter, mungkin ini akan membatu para developer untuk user dalam mencari data dan menampilkan nya secara otomatis. Disini saya menggunakan plugins jquery Autocomplete dimana metode yang dilakukan yakni dengan menggambil data dari database dan di encode ke json. Untuk lebih lanjut mari kita coba.

Bahan yang dibutuhkan
    Framework Codeigniter
    Plugins jquery Autocomplete
    Jquery
    Framework Bootstrap CSS / Optional

1. Buatlah sebuah database dan satu buah tabel, sebagai contoh saya disini membuat data nama-nama negara.. contoh database bisa didownload disini.


CREATE TABLE IF NOT EXISTS `countries` (
  `list_name` varchar(44) CHARACTER SET utf8 DEFAULT NULL,
  `list_code` varchar(2) CHARACTER SET utf8 DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

2. Buat sebuah folder assets Extract Plugins jquery autocomplete dan Bootstrap.

3. Selanjutnya buatlah sebuah controllers dengan nama Countries.php ketikan script berikut.

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Countries extends CI_Controller {

    public function __construct(){
        parent::__construct();
            $this->load->helper('url', 'form');    
            $this->load->model('m_countries');

    }

    public function index() {    
        $this->load->view('v_countries');    
    }

    

    public function get_data() {    
        $keyword = $this->uri->segment(3);
        $data = $this->db->from('countries')->like('list_name',$keyword)->get();            

        foreach($data->result() as $row)
        {
            $arr['query'] = $keyword;
            $arr['suggestions'][] = array(
                'value'    =>$row->list_name
            );
        }
        echo json_encode($arr);
    }
}

4. Tahap selanjutnya buatlah sebuah view dengan nama v_countries.php

<html>
<title>editor</title>
<head>    
    <link href="<?php echo base_url(); ?>assets/bootstrap.min.css" rel="stylesheet"/>
    <link href="<?php echo base_url(); ?>assets/jquery.autocomplete.css" rel="stylesheet"/>
</head>
<body>
<div class="container" style="margin-top:20px;">    
    <div class="row">    
    <div class="panel panel-primary">
    <div class="panel-heading">Create Jquery Autocomplete</div>
    <div class="panel-body">
        <div style="height:300px;">
        <div class="col-sm-6 col-sm-offset-3">
            <div class="form-group">    
<div class="col-md-12">
    <label> Nama Negara</label>
        <input type="text" class="form-control" id="countries" placeholder="Ketikan nama negara" autofocus/>
</div>
            </div>
        </div>
        </div>    
    </div>
</div>    
    <script src="<?php echo base_url(); ?>assets/jquery-2.1.3.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/bootstrap.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/jquery.autocomplete.js"></script>
    <script type="text/javascript">
    var site = "<?php echo site_url();?>";
    $(function(){
        $('#countries').autocomplete({
            serviceUrl: site+'countries/get_data',
        });
    });
    </script>    
</body>
</html>

5. Jika sudah semua tahap selesai mari kita jalankan http://localhost/countries/