09/06/2020
Rumah Code

Membuat autocomplete dengan CI 4 dan jQuery UI

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

Install Codeigniter 4. Pada tutorial kali ini saya tidak akan menjelaskan bagaimana cara mengisntall codeigniter 4 namun temen temen dapat melihat nya pada tutorial saya sebelumnya tentang bagaimana menginstal codeigniter 4

Buatlah database lalu buat tabel dengan menggunakan perintah sql di bawah ini


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;

Buatlah Model M_user.php lalu isi dengan perintah berikut ini

<?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'];
}

Buatlah controller Auto.php lalu isi dengan perintah berikut ini

<?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);

		
	}		
}

Buatlah view auto.php dan isi dengan perintah berikut ini

<!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>