Tutorial Cara Membuat Autocomplete dengan CodeIgniter

Dalam tutorial kali ini kita akan membahas bagaimana cara membuatautocomplete 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

Selanjutnya buat tabel dan field didalam database latihan :

Tabel autocomplete

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

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 :

config/autoload.php

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

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 :

controllers/welcome.php

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

views/index.php

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

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 :

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 ^_^[:]

Related Posts
Leave a reply