Membuat Auto Complete di Codeigniter dengan Jquery

malam semua... kali ini saya pengen coba untuk share bagaimana cara membuat Auto Complete di Framework Codeigniter dengan memanfaatkan plugin Jquery. dalam membuat auto complete ini siapkan terlebih dahulu database, model,view dan controller yang akan dipakai. langsung saja ke kode-nya.

database: berita
create database berita;










  • buat table konten

  • CREATE TABLE konten (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(50) NOT NULL,
    kategori VARCHAR(30) NOT NULL,
    isi_konten VARCHAR(50),
    published TIMESTAMP
    )
    controller : auto.php
    <?php
    defined('BASEPATH') OR exit('No direct script access allowed');
    
    class Auto extends CI_Controller {
     public function __construct()
     {
      parent::__construct();
      $this->load->model('mdb');
     }
     public function index()
     {
      $this->load->view('auto');
     }
     
     public function data()
     {
      $kode=$this->input->post('kode',TRUE);
    
      $query=$this->mdb->cari_judul($kode);
      $json_array = array();
            foreach ($query as $row)
                $json_array[]=$row->title;
            echo json_encode($json_array);
     
    
    
     }
    
    
    }
    

    model: mdb.php
    <?php
    defined('BASEPATH') OR exit('No direct script access allowed');
    
    class Mdb extends CI_Model {
     public function cari_judul($kode)
     {
      $this->db->like('title',$kode);
      $query=$this->db->get('berita');
      return $query->result();
     }
    }
    

    view: auto.php
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="<?php echo base_url();?>assets/jui/jquery-ui.min.js"></script>
        <script type="text/javascript">
        // <![CDATA[
        $(document).ready(function () {
            $(function () {
                $( "#autocomplete" ).autocomplete({
                    source: function(request, response) {
                        $.ajax({ 
                            url: "<?php echo site_url('auto/data'); ?>",
                            data: { kode: $("#autocomplete").val()},
                            dataType: "json",
                            type: "POST",
                            success: function(data){
                                response(data);
                            }    
                        });
                    },
    
    
                });
            });
        });
        // ]]>
        </script>
    </head>
    <body>
    <div id="container">
        <div id="body">
            Text: <input type="text" id="autocomplete" />
        </div>
        <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
    </div>
    </body>
    </html>
    

    nah skrip diatas bisa di implementasikan untuk membuat Auto Complete di codeigniter. kalau misal ada yang perlu ditanyakan bisa langsung bertanya di kolom komentar atau bisa menghubungi ke email: agung.2204@gmail.com. sekian tulisan kali ini semoga membantu dan bermanfaat ^_^.

    NB : mohon maaf kalau tulisannya kacau,
    Previous
    Next Post »

    Pin Post

    Lagu kartun anak 90an Part 1

    Setelah kemarin sempet bahas soal tontonan anak 90an yang dulu sempat merajai tv di hari minggu dan waktu anak-anak menonton acara tv ka...