Selamat malam para pecinta coding di seluruh jagad raya, siapkan secangkir kopi untuk menemani membaca artikel topcer ini gan, biar tidak ngantuk,,wkwkwk
Untuk kali ini kami dari team archives code akan meluncurkan artikel terupdate dan terbaru mengenai cara
Memasang Autocomplete jquery ui di codeigniter yang mudah mudahan agan dapat memahami kalimat sederhana ini dengan tepat dan benar benar mengerti maksudnya
Bagi anda pengembang web tentu tidak asing lagi dengan jquery. Dan salah satu plugin jquery yang paling terkenal adalah jquery ui. kali ini saya akan membagikan tutorial tentang menggunakan autocomplete di codeigniter.
Ok langsung saja kita ke TKP
pertama dan yang paling utama siapkan dulu peralatan tempur nya
1. codeigniter jangan lupa di install ya kalo beluj punya download dulu
http://ellislab.com/codeigniter
2. jquery sekalian pasang ya he he eh kalo belum punya download
http://jquery.com/
3. jquery ui pemasangan nya sama dengan memasang jquery. kalo belum punya silakan download
http://jqueryui.com/download/
ok kalo sudah lengkap semua. mari kita bertempur.
1. Buat controllernya seperti di bawah ini
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Autocomplete extends Controller {
function __construct() {
parent::Controller();
$this->load->model('MAutocomplete');
}
function index(){
$this->load->view('autocomplete/show');
}
function lookup(){
$keyword = $this->input->post('term');
$data['response'] = 'false';
$query = $this->MAutocomplete->lookup($keyword);
if( ! empty($query) )
{
$data['response'] = 'true';
$data['message'] = array();
foreach( $query as $row )
{
$data['message'][] = array(
'id'=>$row->propinsi_id,
'value' => $row->propinsi,
''
);
}
}
if('IS_AJAX')
{
echo json_encode($data);
}
else
{
$this->load->view('autocomplete/index',$data);
}
}
}
function inix digunakan untuk menampilkan form nya dan function lookup digunakan unutk mengambil data dari database yang akan kita tampilkan dengan autocomplete.
2. Buat model nya
<?php
class MAutocomplete extends Model{
function __construct(){
parent::Model();
}
function lookup($keyword){
$this->db->select('*')->from('propinsi');
$this->db->like('propinsi',$keyword,'after');
$query = $this->db->get();
return $query->result();
}
}
dari kode model diatas jika di terjemahkan ke bahasa sql adalan "select * from propinsi where propinsi like 'keyword%';
dimana keyword disini adalah karakter yang kita inputkan di textfiled form.
jadi ketika kita menginputkan karakter di textfiled form makan akan langsung di cari di database tepatnya di tabel propinsi. jika ketemu akan langsung ditampilkan dengan bantuan ajax request.
ok terakhir kita buat unutk tampilan / view nya
3. view
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Codeigniter Autocomplete</title>
<meta charset="UTF-8">
<style>
.ui-autocomplete { position: absolute; cursor: default; }
* html .ui-autocomplete { width:1px; }
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
font-size:80%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
</style>
<script type="text/javascript">
$(this).ready( function() {
$("#provinsi_id").autocomplete({
minLength: 1,
source:
function(req, add){
$.ajax({
url: "<?php echo base_url(); ?>index.php/autocomplete/lookup",
dataType: 'json',
type: 'POST',
data: req,
success:
function(data){
if(data.response =="true"){
add(data.message);
}
},
});
},
select:
function(event, ui) {
$("#result").append(
"<li>"+ ui.item.value + "</li>"
);
},
});
});
</script>
</head>
<body>
Nama Provinsi :
<?php
echo form_input('provinsi','','id="provinsi_id"');
?>
<ul>
<div id="result"></div>
</ul>
</body>
</html>
ok sudah cukup pertempuran nya sekarang silakan uji coba ya semoga berhasil.....
Mungkin demikian dulu gan artikel mengenai Memasang Autocomplete jquery ui di codeigniter yang dapat kami sajikan, silahkan disantab sesuai dengan selera,,wkwkwk
Apabila ada masukan silahkan masuk pada diskusi dibawah ini gan, akan kami tampung dulu gan ( entah kapan bisa membalasnya )..xixixi
Brapo brapo brapo yezzz..!!!