Membuat Autofill Autocomplete Dan Autoselected Dengan Ajax Jquery

MEMBUAT AUTOFILL, AUTOSELECT,
AUTOCOMPLETE
DENGAN AJAX DAN JQUERY
AUTOFILL : “Inputan otomatis terisi berdasarkan nomor unik seperti NIM, NIK, ID atau
nomor unik lainnya”.
Langkah 1 : pergunakan database dengan nama crud_jqueryajax dengan tabel users.

Langkah 2 : buat folder dengan nama ajax_autofill di xampp\htdocs dengan susunan sebagai
berikut :
Langkah 3 : buat file formautofill.php dengan source code sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Autofill</title>
</head>
<body>
<form action="">
<table>
<tr><td>ID</td><td><input type="text" onkeyup="isi_otomatis()"
id="userid" style="width:30px;"></td></tr>
<tr><td>NAMA</td><td><input type="text"
id="nama" disabled style="width:300px;"></td></tr>
<tr><td>EMAIL</td><td><input type="text"
id="email" disabled style="width:300px;"></td></tr>
<tr><td>ALAMAT</td><td><input type="text"
id="alamat" disabled style="width:600px;"></td></tr>
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
function isi_otomatis(){
var userid = $("#userid").val();
$.ajax({
url: 'ajax.php',
data:"id="+userid ,
}).success(function (data) {
var json = data,
obj = JSON.parse(json);
$('#nama').val(obj.nama);
$('#email').val(obj.email);
$('#alamat').val(obj.alamat);
});
}
</script>
</body>
</html>
Langkah 4 : buat file ajax.php dengan source code sebagai berikut :
<?php
//membuat koneksi ke database
$koneksi = mysqli_connect("localhost", "root", "", "crud-jqueryajax");
//variabel nim yang dikirimkan form.php
$id = $_GET['id'];
//mengambil data
$query = mysqli_query($koneksi, "select * from users where id='$id'");
$user = mysqli_fetch_array($query);
$data = array(
'nama' => $user['nama'],
'email' => $user['email'],
'alamat' => $user['alamat'],);
//tampil data
echo json_encode($data);
?>
Setelah selesai silahkan anda jalankan pada browser dengan mengakses
http://localhost:8080/ajax_autofill/formautofill.php, sehingga akan muncul hasil sebagai
berikut :
AUTOCOMPLETE : “autocomplete/autosuggest pada textbox menggunakan Ajax yang

mengambil datanya dari database MySQL. Seperti saat kita ingin melakukan pencarian pada
google maka akan muncul kata sugesti setiap kita mengetikkan 1. Kali ini kita hanya
menggunakan Ajax”.
Langkah 1 : pergunakan database dengan nama crud_jqueryajax dengan tabel users.

Langkah 2 : buat folder dengan nama ajax_autocomplete di xampp\htdocs dengan susunan
sebagai berikut :
Langkah 3 : buat file index.php dengan source code sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Ajax Autocomplete</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
ul{
background-color:#eee;
cursor:pointer;
position: absolute;
width: 95%;
}
li{
padding:12px;
border:thin solid #F0F8FF;
}
li:hover{
background-color:#7FFFD4;
}
</style>
</head>
<body class="bg-light">
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand text-white" href="index.php">
LP3I Kampus Depok
</a>
</nav>
<div class="container">
<h3 align="center" class="mt-3 mb-5">Ajax Autocomplete pada
Textbox Menggunakan Ajax</h3>
<div class="row">
<div class="col-sm-6 offset-sm-3">
<label>Nama User</label>
<input type="text" name="nama" id="nama" class="form-control"
placeholder="Tulis Nama User" />
<div id="userList"></div>
</div>
</div>
</div>
<div class="fixed-bottom text-center mt-5">© <?php echo date('Y'); ?> Copyright :

<a href="https://www.lp3i.ac.id/"> LP3I Jakarta</a>
</div>
</body>
</html>
<script type="text/javascript" src="ajax_autocomplete.js"></script>
Langkah 4 : buat file ajax_autocomplete.js dengan source code sebagai berikut :
$(document).ready(function(){
$('#provinsi').keyup(function(){
var query = $(this).val();
if(query != '')
{
$.ajax({
url:"search.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#provinsiList').fadeIn();
$('#userList').html(data);
}
});
}
});
$(document).on('click', 'li', function(){
$('#nama').val($(this).text());
$('#userList').fadeOut();
});
});
Langkah 5 : buat file koneksi.php dengan source code sebagai berikut :
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'crud-jqueryajax');
// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
if($db1 === false){

die("ERROR : can not connect to database. Check error here" . mysqli_connect_error());
}
?>
Langkah 6 : buat file search.php dengan source code sebagai berikut :
<?php
include 'koneksi.php';
if(isset($_POST["query"])){
$output = '';
$key = "%".$_POST["query"]."%";
$query = "SELECT * FROM users WHERE nama LIKE ? LIMIT 10";
$aku1 = $db1->prepare($query);
$aku1->bind_param('s', $key);
$aku1->execute();
$res1 = $aku1->get_result();
$output = '<ul class="list-unstyled">';

if($res1->num_rows > 0){
while ($row = $res1->fetch_assoc()) {
$output .= '<li>'.$row["nama"].'</li>';
}
} else {
$output .= '<li>Tidak ada yang cocok.</li>';
}
$output .= '</ul>';
echo $output;
}
?>

http://localhost:8080/ajax_autocomplete, sehingga akan muncul hasil sebagai berikut :
AUTOSELECTED : “Menampilkan data otomatis terisi berdasarkan nomor unik atau kunci
tertentu”
Langkah 1 : tambahkan tabel berikut pada database crud_jqueryajax :
Isilah tabel propinsi dengan data sebagai

berikut :
Isi Tabel Kota dengan data sebagai berikut :

Langkah 2 : buat folder dengan nama ajax_autoselected di xampp\htdocs dengan susunan
sebagai berikut :
Langkah 3 : buat file index.php dengan source code sebagai berikut :
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1
/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1
/jquery.min.js"></script>
<nav class="navbar navbar-dark bg-primary fixed-top">
<a class="navbar-brand" href="index.php" style="color: #fff;">
LP3I Kampus Depok
</a>
</nav>
<div class="container mb-5">

<h2 align="center" style="margin: 60px 10px 10px 10px;">Ajax Combobox
Selected Bertingkat</h2><hr>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Provinsi</label>
<select class="form-control" name="provinsi" id="provinsi">
<option value=""> Pilih Provinsi</option>
</select>
</div>
<div class="form-group">
<label>Kabupaten/Kota</label>
<select class="form-control" name="kabupaten" id="kabupaten">
<option value=""></option>
</select>
</div>
</div>
</div>
<hr>
</div>
<div class="fixed-bottom text-center mt-5">© <?php echo date('Y'); ?> Copyright :

<a href="https://www.lp3i.ac.id/"> LP3I Jakarta</a>
</div>
</html>
<script type="text/javascript" src="ajax_autoselected.js"></script>
Langkah 4 : buat file ajax_autoselected.js dengan source code sebagai berikut :
$(document).ready(function(){
$.ajax({
type: 'POST',
url: "get_propinsi.php",
cache: false,
success: function(msg){
$("#provinsi").html(msg);
}
});
$("#provinsi").change(function(){
var provinsi = $("#provinsi").val();
$.ajax({
type: 'POST',
url: "get_kabupaten.php",
data: {provinsi: provinsi},
cache: false,
success: function(msg){
$("#kabupaten").html(msg);
}
});
});
});
Langkah 5 : buat file get_propinsi.php dengan source code sebagai berikut :
<?php
echo "<option value=''>Pilih Provinsi</option>";
$query = "SELECT * FROM propinsi ORDER BY nama_prov ASC";

$d1 = $db1->prepare($query);
$d1->execute();
$res1 = $d1->get_result();
echo "<option value='" . $row['id'] . "'>" . $row['nama_prov'] . "</option>";
}
?>
Langkah 6 : buat file get_kabupaten.php dengan source code sebagai berikut :
<?php
$provinsi = $_POST['provinsi'];
echo "<option value=''>Pilih Kabupaten</option>";
$query = "SELECT * FROM kota WHERE prov_id=? ORDER BY nama_kota ASC";
$dw1 = $db1->prepare($query);
$dw1->bind_param("i", $provinsi);
$dw1->execute();
$res1 = $dw1->get_result();
echo "<option value='" . $row['id'] . "'>" . $row['nama_kota'] . "</option>";
}
?>
Langkah 7 : buat file koneksi.php dengan source code sebagai berikut :
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'crud-jqueryajax');
// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
if($db1 === false){
die("ERROR : can not connect to database. Check error here" . mysqli_connect_error());
}
?>
http://localhost:8080/ajax_autoselected, sehingga akan muncul hasil sebagai berikut :
SELAMAT MENCOBA

Membuat Autofill Autocomplete Dan Autoselected Dengan Ajax Jquery

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Autofill Autocomplete Dan Autoselected Dengan Ajax Jquery

Diunggah oleh

Hak Cipta:

Format Tersedia

MEMBUAT AUTOFILL, AUTOSELECT,

Langkah 1 : pergunakan database dengan nama crud_jqueryajax dengan tabel users.

Langkah 3 : buat file formautofill.php dengan source code sebagai berikut :

Langkah 4 : buat file ajax.php dengan source code sebagai berikut :

AUTOCOMPLETE : “autocomplete/autosuggest pada textbox menggunakan Ajax yang

Langkah 1 : pergunakan database dengan nama crud_jqueryajax dengan tabel users.

Langkah 3 : buat file index.php dengan source code sebagai berikut :

<div class="fixed-bottom text-center mt-5">© <?php echo date('Y'); ?> Copyright :

Langkah 5 : buat file koneksi.php dengan source code sebagai berikut :

if($db1 === false){

$output = '<ul class="list-unstyled">';

Setelah selesai silahkan anda jalankan pada browser dengan mengakses

Langkah 1 : tambahkan tabel berikut pada database crud_jqueryajax :

Isilah tabel propinsi dengan data sebagai

Isi Tabel Kota dengan data sebagai berikut :

Langkah 3 : buat file index.php dengan source code sebagai berikut :

<div class="container mb-5">

<div class="fixed-bottom text-center mt-5">© <?php echo date('Y'); ?> Copyright :

Langkah 4 : buat file ajax_autoselected.js dengan source code sebagai berikut :

$query = "SELECT * FROM propinsi ORDER BY nama_prov ASC";

Langkah 6 : buat file get_kabupaten.php dengan source code sebagai berikut :

Langkah 7 : buat file koneksi.php dengan source code sebagai berikut :

Anda mungkin juga menyukai