Pada tutorial kali ini kita akan coba membuat autocomplete dengan jquery ui, adapun pengertian autocomplete menurut wiki adalah Pelengkapan otomatis, atau pelengkapan kata, adalah fitur yang digunakan aplikasi untuk memprediksi sisa kata yang sedang diketik pengguna.
Langsung saja kita praktekan, yang harus di lakukan pertama kali ada membuat folder projek dan buat file index.php, karna kita juga akan coba menarik data dari mysql
Setelah itu buka index.php yang dibuat tadi dan masukan script dibawah ini.
<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">
</body>
<script type="text/javascript">
var data = ["Anjas","Iban","Cahyo","Farhan","Kutet","Virga","Oscar","Dani"];
$("#autocomplete").autocomplete({
source: data
});
</script>
</html>
Coba jalankan dan isi textboxnya maka akan ada autocomplete sesuai data yang di tulis
Pada tahap ini kita berhasil membuat autocomplete dengan jquery ui. selanjutnya kita akan coba memakai data dari database mysql.
sebelumnya kita buatkan dlu database dan tabel. kita akan buat database dengan nama contoh_db dan mempunyai tabel profile dengan kolom id, nama, kelurahan. lihat gambar dibawah!
dan tambahkan datanya.
setelah itu buatkan file data.php di dalam folder projek yg di buat. dan masukan script dibawah
<?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()) {
array_push($array, $row["nama"]);
}
echo json_encode($array);
} else {
echo "0 results";
}
$conn->close();
?>
dan edit juga file index.php.
<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">
</body>
<script type="text/javascript">
$("#autocomplete").autocomplete({
source: "data.php"
});
</script>
</html>
atau bisa dengan cara satu file saja dengan memasukan data.php ke dalam index.php, lebih jelasnya 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()) {
array_push($array, $row["nama"]);
}
}
$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">
</body>
<script type="text/javascript">
var data = <?= json_encode($array) ?>;
$("#autocomplete").autocomplete({
source: data
});
</script>
</html>
Sekian untuk tutorial kali ini tentang Membuat AutoComplete dengan JQuery UI, semoga bermanfaat!
Tutorial Selanjutnya - Cara Membuat AutoComplete Select Change Di JQuery