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.
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 :
Klik gambar untuk memperbesar
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 :
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 :
Klik gambar untuk memperbesar
Klik gambar untuk memperbesar
Klik gambar untuk memperbesar
Sekian tutorial saya tentang Autocomplete dengan codeigniter, semoga bisa menambah pengetahuan sahabat twd semua ^_^
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
sama-sama gan, coba baca artikel categori responsive lainnya di TWD banyak ^_^
KEREN
Database ya koq ngak ada gan
Database sudah dibahas di langkah pertama, silahkan baca lagi artikelnya
akhirnyaaa nemu yang berfungsi juga ^_^ makasih banyak mas buat tutorialnya
Terimakasih kembali, jangan lupa like twd nya mase ^_^
Keren , Akhir Nya Ke Temu Juga Book Mark Dolo Buat Pembelajaran
Sama sama gan, senang bisa berbagi ^_^
mas sorce codenya saya coba ga jalan ya autocomplete nya? apa pengaruh sama browsernya ga suport?
coba liat file js nya gan ^_^
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 ^_^
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 :\
pakai CI berapa gan ?
Sama juga gan. Nggak nampil, databasenya bukan pakai yang contoh tapi pakai yang sendiri. Dah di modif juga controller sama modelnya tapi tetap nggak bisa. Kalau json itu di XAMPP yang diaktifin itu Tomcatnya juga kan?
ga udah gan, cukup apache dan mysql yang di start, coba console satu satu biar bertahap dan ketauan error pas bagian mana ;)
Ini utk CI versi brp ya?
dalam tutorial ini saya pakai CodeIgniter 2.x ^_^
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..
coba diliat disitu kan penggunaan like : ->like ^_^
Terima kasih
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
bisa jadi mas, soalnya disini saya pakai v2+
error ini gmn ya maksudnya “this.source( { term: value }, this._response() );”
???
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?
kodenya lebih kompleks dan tidak dibahas di tulisan ini
Saya coba pakai database yg lain kok ga bisa ya?
saya sudah menyesuaikan skrip diatas dengan database yg mau dipakai tetapi tetap tidak bisa…
Mantab gan,,jalan ni… :D
wah keren nnih, GAK JALAN :3
thanks, this article very helpful
modelnya gak dibuat gan?
thanks article nya helpfull banget gan, gan tapi kalau mau dibuat 2 autocomplete kaya gini dengan database yan berbeda disatu halaman kira kira gimana ya gan?
itu, untuk
“action=””
mengarah kemana ya??
saran gan kalau bisa buat yang CI versi 3, hehehe :D
Pada dasarnya caranya sama saja kok
Gan kalau yg pakai library template gmn ya?
Mantap bosque