Pada tutorial kali ini saya akan membahas tentang bagaimana cara membuat jQuery autocomplete dengan menggunakan Codeigniter 4.
Mari kita mulai saja tutorial membuat autocomplete jQuery UI dengan menggunakan Codeigniter 4
CREATE TABLE `user` (
`user_id` varchar(20) NOT NULL,
`user_password` tinytext DEFAULT NULL,
`user_email` varchar(50) DEFAULT NULL,
`user_alias` varchar(50) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `user`
--
INSERT INTO `user` (`user_id`, `user_password`, `user_email`, `user_alias`) VALUES
('admin', '21232f297a57a5a743894a0e4a801fc3', 'admin@host.com', 'Admin'),
('adrian', '8c4205ec33d8f6caeaaaa0c10a14138c', 'adrian@gmail.com', 'Adriana'),
('andri', '6bd3108684ccc9dfd40b126877f850b0', 'andri@yahoo.com', 'Andriana'),
('ardi', '0264391c340e4d3cbba430cee7836eaf', 'ardi@gmail.com', 'Ardianan'),
('bagas', 'ee776a18253721efe8a62e4abd29dc47', 'bagas@rc.org', 'Bagas Adi'),
('bima', '7fcba392d4dcca33791a44cd892b2112', 'bima@google.com', 'Bima Satria'),
('herdi', '70ef423c063dfa178e58114b90052a9b', 'herdi@aol.com', 'Herdianan'),
('heri', '6812af90c6a1bbec134e323d7e70587b', 'heri@google.com', 'Heriana'),
('lili', '777bbb7869ae8193249f8ff7d3e59afe', 'lili@bing.com', 'Lilianan'),
('novi', '832f72b7a13b2cedcfb108603a10e2a6', 'novi@gmail.com', 'Noviana'),
('rudi', '1755e8df56655122206c7c1d16b1c7e3', 'rudi@yahoo.com', 'Rudiana'),
('wisnu', '202cb962ac59075b964b07152d234b70', 'wisnu@yahoo.com', 'wisnu i'),
('yuli', '4a01a05a350e1c7710c989f1211245a8', 'yuli@gmail.com', 'Yulianan');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `user`
--
ALTER TABLE `user`
ADD PRIMARY KEY (`user_id`);
COMMIT;
<?php namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;
class M_user extends Model
{
protected $table = 'user';
protected $primaryKey = 'user_id';
protected $allowedFields = ['user_id', 'user_email','user_alias','user_password'];
}
<?php namespace App\Controllers;
use CodeIgniter\Controller;
use App\Models\M_user;
class Auto
extends Controller
{
public function index()
{
return view('auto');
}
public function list()
{
$model = new M_user();
$request = \Config\Services::request();
$id = $request->getPostGet('term');
$user = $model->like('user_id', $id)->findAll();
$w = array();
foreach($user as $rt):
$w[] = [
"label" => $rt['user_id'],
"email" => $rt['user_email'],
];
endforeach;
echo json_encode($w);
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Codeigniter 4 + jQuery UI auto Complete</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$( "#cari" ).autocomplete({
minLength: 0,
source: 'auto/list',
focus: function( event, ui ) {
$( "#cari" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#cari" ).val( ui.item.label );
$( "#results").text( ui.item.email);
return false;
}
})
});
</script>
</head>
<body>
Cari: <input type="text" id="cari" />
<br/><br/><br/><br/>
<p>Email : <span id="results"></span></p>
</body>
</html>
Selesai sudah tutorial singkat pembuatan autocomplete dengan menggunakan jQuery UI dan Codeigniter 4. Semoga dapat bermanfaat buat teman teman.