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

    Spoiler One Piece 1044 - Hito Hito No Mi Model Nika Nama Asli Buah Iblis Luffy ?

    Setelah trending selama beberapa waktu ini di twitter One Piece 1044 akhirnya muncul bocoran spoiler nya, berikut spoiler One Piece Chapter ...