Ditutorial kali ini kita akan mencoba membuat autocomplete select change, maksud select change di sini adalah ketika kita memilih data autocomplete maka akan mucul data yang lain. bingungkan maksudnya gmna? yg nulis juga sbnernya bingung sih mau kasih judul apa wkwkw
dari pada bingung kita lihat dlu contohnya seperti apa, tapi sebelum itu lihat tutorial sebelumnya Membuat AutoComplete dengan JQuery UI
pada tutorial sebelumnya kita sudah membuat autocomplete textbox serta data mysqlnya juga. kali ini kita akan menambahkan lagi 1 textbox yang akan menampilkan kelurahan jika textbox pertama yg autocomplete itu di pilih. silhakan lihat script dibawah ini.
index.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "contoh_db";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM profile";
$result = $conn->query($sql);
$array=[];
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$profile = [
'key' => $row["id"],
'value' => $row["nama"],
'kelurahan' => $row["kelurahan"]
];
array_push($array, $profile);
}
}
$conn->close();
?>
<html>
<head>
<title>Auto Complete dengan JQuery UI</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<h1>Auto Complete dengan JQuery UI</h1>
<hr>
<input type="text" name="" id="autocomplete">
<input type="text" name="" id="kelurahan">
</body>
<script type="text/javascript">
var data = <?= json_encode($array) ?>;
$("#autocomplete").autocomplete({
source: data,
select: function (event, ui) {
console.log(ui.item);
$('#kelurahan').val(ui.item.kelurahan);
}
});
</script>
</html>
coba jalankan maka ketika kita memilih data nama maka akan muncul juga data kelurahan
Sekian untuk tutorial cara membuat select change autocomplete, semoga bermanfaat! Terimakasih
Tutorial Sebelumnya - Paling Mudah !! Membuat AutoComplete Dengan JQuery UI