Selamat Datang

Tutorial Cara Membuat Autocomplete dengan CodeIgniter

Dalam tutorial kali ini kita akan membahas bagaimana cara membuat autocomplete dengan codeigniter, dalam pembahas ini saya asumsikan sahabat TWD semua sudah faham setting awal codeigniter. Jika belum silahkan pelajari terlebih dahulu dua tutorial dibawah ini

Autocomplete atau melengkapi kata adalah sebuah fitur dimana aplikasi memprediksi sisa dari kata yang diketik oleh pengguna. 

Autocomplete

Autocomplete (Foto: Etsy.com)

Langkah pertama kita buat sebuah database dengan nama latihan di phpmyadmin :

Database: `latihan`
Database latihan

Selanjutnya buat tabel dan field didalam database latihan :

--
-- Struktur dari tabel `autocomplete`
--

CREATE TABLE IF NOT EXISTS `autocomplete` (
  `nim` bigint(20) NOT NULL,
  `nama` varchar(30) NOT NULL,
  `jurusan` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Tabel autocomplete

Masukan / Insert data baru untuk menampilkan data saat pencarian autocomplete :

--
-- Dumping data untuk tabel `autocomplete`
--

INSERT INTO `autocomplete` (`nim`, `nama`, `jurusan`) VALUES
(1199870012, 'Muhammad Yusuf Hamdani', 'Teknik Informatika'),
(7779127910, 'Tutorial Web Design', 'Tutorial Website'),
(9998711120, 'Rahmayanti', 'PGSD');
Insert data autocomplete

Database latihan phpmyadmin akan terlihat seperti ini :

Struktur database latihan

Klik gambar untuk memperbesar

 

Contoh isi database

Klik gambar untuk memperbesar

Buka config/autoload.php, kemudia cari code dibawah ini dan sesuaikan seperti ini :

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url','form');
config/autoload.php

Buka config/database.php, kemudia cari code dibawah ini dan sesuaikan seperti ini :

$active_group = 'default';
$active_record = TRUE;

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'latihan';
$db['default']['dbdriver'] = 'mysql';
$db['default']['dbprefix'] = '';
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = '';
$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;
config/database.php

Untuk memulai membuat autocomplete kita perlau javascript, silahkan download :

Download css dan js  – klik link untuk mendownload

Struktur atau penempatan file akan terlihat seperti ini, silahkan buat folder dan sesuaikan :

asas

Kemudia buka controllers/welcome.php, sesuaikan seperti dibawah ini :

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {

	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -  
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in 
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see http://codeigniter.com/user_guide/general/urls.html
	 */
	public function index()
	{
		$this->load->view('index');
	}
}

/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
?>
controllers/welcome.php

Buat file baru index.php, buka view/ sesuaikan seperti dibawah ini :

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>

<<!DOCTYPE html>
<html>
<head>
    <title>Autocomplete | AZZURA Media</title>


    <!-- Memanggil file .js untuk proses autocomplete -->
    <script type='text/javascript' src='<?php echo base_url();?>assets/js/jquery-1.8.2.min.js'></script>
    <script type='text/javascript' src='<?php echo base_url();?>assets/js/jquery.autocomplete.js'></script>

    <!-- Memanggil file .css untuk style saat data dicari dalam filed -->
    <link href='<?php echo base_url();?>assets/js/jquery.autocomplete.css' rel='stylesheet' />

    <!-- Memanggil file .css autocomplete_ci/assets/css/default.css -->
    <link href='<?php echo base_url();?>assets/css/default.css' rel='stylesheet' />

    <script type='text/javascript'>
        var site = "<?php echo site_url();?>";
        $(function(){
            $('.autocomplete').autocomplete({
                // serviceUrl berisi URL ke controller/fungsi yang menangani request kita
                serviceUrl: site+'/autocomplete/search',
                // fungsi ini akan dijalankan ketika user memilih salah satu hasil request
                onSelect: function (suggestion) {
                    $('#v_nim').val(''+suggestion.nim); // membuat id 'v_nim' untuk ditampilkan
                    $('#v_jurusan').val(''+suggestion.jurusan); // membuat id 'v_jurusan' untuk ditampilkan
                }
            });
        });
    </script>


</head>
<body>


<div id="content">
<h1>Autocomplete</h1>
<form action="<?php echo site_url('admin/c_admin/add_orders'); ?>" method="post">
    <div class="wrap">
    <table>
        <tr>
            <td><small>Nama :</small><br><input type="search" class='autocomplete nama' id="autocomplete1" name="nama_customer"/></td>
        </tr>
        <tr>
            <td><small>Jurusan :</small><br><input type="text" class='autocomplete' id="v_jurusan" name="nama_customer"/></td>
        </tr>
        <tr>
            <td><small>NIM :</small><br><input type="text" class='autocomplete' id="v_nim" name="nama_customer"/></td>
        </tr>
    </div>
</form>
</div>


</body>
</html>
views/index.php

Buat file baru autocomplete.php untuk menampilkan data saat dicari, buka controllers/ sesuaikan seperti dibawah ini :

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Autocomplete extends CI_Controller
{
	public function __construct()
	{
		parent::__construct();
	}
	public function search()
	{
		// tangkap variabel keyword dari URL
		$keyword = $this->uri->segment(3);

		// cari di database
		$data = $this->db->from('autocomplete')->like('nama',$keyword)->get();	

		// format keluaran di dalam array
		foreach($data->result() as $row)
		{
			$arr['query'] = $keyword;
			$arr['suggestions'][] = array(
				'value'	=>$row->nama,
				'nim'	=>$row->nim,
				'jurusan'	=>$row->jurusan

			);
		}
		// minimal PHP 5.2
		echo json_encode($arr);
	}
}
?>
controllers/autocomplete.php

Yang terakhir silahkan buat css untuk mendesain form input dll, apabila sahabat belum membuat folder assets/css silahkan buat dulu pada folder website sahabat, untuk struktur folder dan file silahkan lihat pada gambar atas, berikut isi skrip dari default.css :

body {
	font-family: verdana,arial,sans-serif;
	margin: 0px;
	padding: 0px;
}

.wrap { 
	width:50%; 
	background:#F0F0F0; 
	margin:auto;
	padding: 25px;
	overflow: hidden;
}

h1 {
	text-align: center;
}

input.nama {
	font-size:28px; 
	width:380px;
}

input, textarea {
    border: 1px solid #CCC;
}
assets/css/default.css

Selamat, sahabat semua sudah menyelesaikan tutorial dengan baik, sekarang silahkan coba di browser dan lihat hasilnya akan seperti ini :

aq3

Klik gambar untuk memperbesar

autocomplete awal

Klik gambar untuk memperbesar

autocomplete mengetik huruf

Klik gambar untuk memperbesar

Download Project autocomplete_ci

Sekian tutorial saya tentang Autocomplete dengan codeigniter, semoga bisa menambah pengetahuan sahabat twd semua ^_^





Penulis :

Nama lengkap saya Muhamad Yusup Hamdani kelahiran dibogor, saya CEO & Founder Elephant, membangun aplikasi android dan website. email daniguavara562@gmail.com View all posts by Muhamad Yusup Hamdani

Comments

31 thoughts on “Tutorial Cara Membuat Autocomplete dengan CodeIgniter

  1. Freddy says:

    Wah ini yang keren, mau berbagi ilmu, btw update donk pak tentang css responsive gambar dan text (p, h1, h2, h3. h4 ) sudah coba bootsrap dan lagi on fire dengan responsive :D

  2. ex says:

    Database ya koq ngak ada gan

  3. Radhian Prayoga says:

    akhirnyaaa nemu yang berfungsi juga ^_^ makasih banyak mas buat tutorialnya

  4. Erlangga says:

    Keren , Akhir Nya Ke Temu Juga Book Mark Dolo Buat Pembelajaran

  5. aziz says:

    mas sorce codenya saya coba ga jalan ya autocomplete nya? apa pengaruh sama browsernya ga suport?

  6. anto says:

    mau tanya,,kenapa jadi semua input type text jadi autocomplete ??

    • coba dihapus aja gan bagian ini :

      $(‘#v_nim’).val(”+suggestion.nim); // membuat id ‘v_nim’ untuk ditampilkan
      $(‘#v_jurusan’).val(”+suggestion.jurusan); // membuat id ‘v_jurusan’ untuk ditampilkan

      itu untuk nemambahkan nilai dari data yg kita cari ^_^

  7. miranda says:

    kok ane gk bisa ya??
    padahal pake php versi 5.4.7 dan contohin sampai bener hingga ane download tapi tampilannya gak sesuai hasil akhirnya alias gak nampil autocomplete search ya :\

  8. Jessica says:

    Ini utk CI versi brp ya?

  9. arman says:

    wah keren banget mas,,, mksh sangat ngebantu,
    saya mau tanya kenapa ketika saya ketik lebih dari 5 warna teks nya gak keluar, dengan kata lain hanya 5 karakter saja yang di kenal.
    makasih..

  10. azizal says:

    sya coba bisa mas tapi saya coba ke project saya ga bisa kenapa ya ??

    apa versi nya dari ci nya ya ?

    saya pake versi 3

  11. yudhistiro says:

    error ini gmn ya maksudnya “this.source( { term: value }, this._response() );”
    ???

  12. yuzplay says:

    sudah bisa saya jalankan mas,,, tetapi ada yang mau saya tanyakan, yaitu jika kita mau input lebih dari 1 kata dengan pemisah spasi kok tidak bisa ya?

  13. Sherave says:

    Saya coba pakai database yg lain kok ga bisa ya?
    saya sudah menyesuaikan skrip diatas dengan database yg mau dipakai tetapi tetap tidak bisa…

  14. dasril says:

    Mantab gan,,jalan ni… :D

  15. rizal says:

    wah keren nnih, GAK JALAN :3

  16. dede says:

    thanks, this article very helpful

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development