Autocomplete merupakan salah satu fitur pada suatu form dimana data-data akan keluar saat kita ketikan pada form. Contoh penggunaan autocomplete ini yang paling sering kita jumpai adalah google.
Berikut adalah penggunaan autocomplete dengan codeigniter (PHP):
1. Download terlebih dahulu Jquery UI yang ada autocompletenya http://jqueryui.com/download/
2. Buatlah database akademik dengan table mahasiswa yang isinya (id dan nama)
3. pada codeigniter setting konfigurasi
-> autoload.php
$autoload['libraries'] = array('database');-> constant.php
$autoload['helper'] = array('url','form');
pada baris terakhir ketikan script berikut jika menggunakan ajax :
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
-> setting database.php
-> setting routes.php dengan $route['default_controller'] = "Home";4. edit model, view, dan controller nya
-> Buat model Home_model.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home_model extends CI_Model
{
function seek($keyword){
$this->db->select('*')->from('mahasiswa');
$this->db->like('nama',$keyword,'after');
$query = $this->db->get();
return $query->result();
}
}
-> Buat Home_view.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="akademik" class=" no_js">
<head>
<title>Cari Data</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="en" />
<link type="text/css" href="<?php echo base_url() ?>asset/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="<?php echo base_url() ?>asset/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>asset/js/jquery-ui-1.10.3.custom.js"></script>
</head>
<body>
<script type="text/javascript">
$().ready( function() {
$("#autocomplete").autocomplete({
minLength: 1,
source:
function(req, add){
$.ajax({
url: "index.php/home/lookup",
dataType: 'json',
type: 'POST',
data: req,
success:
function(data){
if(data.response =='true'){
add(data.message);
}
}
});
},
});
});
</script>
<?php
echo form_input('autocomplete','','id="autocomplete"');
?>
</body>
</html>
-> Buat Controller Home.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->helper('url');
$this->load->helper('form');
}
function index() {
$this->load->view('home_view');
}
function lookup(){
// memproses hasil pengetikan keyword pada form
$keyword = $this->input->post('term');
$data['response'] = 'false'; //mengatur default response
$this->load->model('home_model'); // memanggil file model
$query = $this->home_model->seek($keyword); //memanggil fungsi pencarian pada model
if(! empty($query) ) {
$data['response'] = 'true'; //mengatur response
$data['message'] = array(); //membuat array
foreach( $query as $row ){
$data['message'][] = array('label' => $row->nama, 'value' => $row->nama); //mengisi array dengan record yang diperoleh
}
}
//konstanta IS_AJAX
if(IS_AJAX){
echo json_encode($data); //mencetak json jika merupakan permintaan ajax
}
else {
$this->load->view('home/index',$data); //memanggil file view dan mengisi data yg diperoleh
}
}
}
oh ya jangan lupa untuk menempatkan file jquerynya disesuikan juga ya dengan yang ada di home_view.php
Tidak ada komentar:
Posting Komentar