autocomplete textbox dengan jquery, php dan MySQL
Monday 18 November 2019
Edit
Autocomplete textbox dengan jquery, php dan MySQL
Autocomplete textbox dengan jquery, php dan mysql sangat berguna untuk memudahkan user ketika mengetikkan suatu karakter dan autocomplete memberikan saran dari kata yang di ketik sehingga bisa mempermudah dan mempercepat user dalam menginput data. Kali ini saya akan coba bahas tentang auto complete dengan memanfaatkan data yang ada di database mysql.
Dengan memanfaatkan database maka text autocomplete bisa memberikan saran dari karakter yang di ketik oleh user, yang akan di buat pada tutorial kali ini adalah seperti gambar di bawah ini.
Pertama membuat file auto complete silahkan anda copy dan pastekan code di bawah ini kemudian simpan dengan nama autocomplete.php ke dalam drive c:/xampp/htdocs
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
font: 16px Arial;
}
/*the container must be positioned relative:*/
.autocomplete {
position: relative;
display: inline-block;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
color: #fff;
cursor: pointer;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
/*when hovering an item:*/
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Autocomplete</h2>
<p>Start typing:</p>
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
</form>
<script>
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/*create a DIV element for each matching element:*/
b = document.createElement("DIV");
/*make the matching letters bold:*/
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
/*An array containing all the country names in the world:*/
var countries = [<?php include "conn.php"; ?>];
/*initiate the autocomplete function on the "myInput" element, and pass along the countries array as possible autocomplete values:*/
autocomplete(document.getElementById("myInput"), countries);
</script>
</body>
</html>
Setelah itu lanjut membuat sebuah file koneksi dan select data dari databse mysql yang nantinya akan dimunculkan data tersebut di textbox autocomplete, silahkan copy dan pastekan kode berikut ini kemudian simpan dengan nama conn.php di drive c:/xampp/htdocs
<?php
$db_host = "localhost";
$db_user = "root";
$db_pass = "";
$db_name = "select2";
$koneksi = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if(mysqli_connect_errno()){
echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error();
}
$query1="SELECT * FROM provinsi";
$tampil=mysqli_query($koneksi, $query1) or die(mysqli_error($koneksi));
$no=0;?>
<?php
while($data=mysqli_fetch_array($tampil))
{ $no++;
?>
"<?php
echo $data['provinsi'];?>",<?php } ?>
Langkah selanjutnya membuat database dengan nama select2 kemudian buat tabel dengan nama provinsi dengan field (id, provinsi) nah silahkan ada input nama provinsi untuk testing textboxt autocomplete.
Penjelasan singkat kode
Kode di bawah ini merupakan kode untuk pemanggilan file conn.php untuk select data yang nantinya akan menjadi rekomendasi kata dari huruf yang di ketik di textboxt autocomplete
/*An array containing all the country names in the world:*/ var countries = [<?php include "conn.php"; ?>];
Semoga tutorial singkat ini bisa bermanfaat untuk anda yang sedang mencari solusi autocomplete textboxt dengan jquery, php dan MySQL. Silahkan anda coba dan anda praktekkan karena tanpa mencoba tidak akan ada hasil.
Happy Coding & Programming