Hallo sahabat, selamat datang kembali di website tips dan trik Dumet School. Berjumpa lagi dengan saya pada pembahasan tips dan trik seputar dunia website. Dalam kesempatan kali ini saya akan memberikan tips tentang Cara Membuat Autocomplete dengan VueJs dimana fitur ini dapat kita gunakan di website kita. Nah autocomplete ini mengacu pada input data dan mempermudah user untuk mengetikkan apa yang akan dimasukkan.Nah dalam artikel ini bagaimana Cara Membuat Autocomplete dengan VueJs ,yang perlu diperhatikan sahabat harus mempersiapakan strukturnya terlebih dahulu seperti berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Membuat Autocomplete Dengan VueJs</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="container">
<h1>Cara Membuat Autocomplete Dengan Vue Js</h1>
<div id="app">
<div class="autocomplete" style="width:300px;">
<input @blur="onBlur=true" @focus="onFocus = true;onBlur = false;" v-model="autocomplete" @keyDown="keyDown" type="text" name="autocomplete" >
<div class="autocomplete-items">
<div :class="currentFocus == index ? 'autocomplete-active' : ''" v-for="(i, index) in arr" v-if= "onFocus && i.substr(0, autocomplete.length).toLowerCase() == autocomplete.toLowerCase()" @click="autocomplete = i; onFocus = false;">
<strong>{{i.substr(0, autocomplete.length)}}</strong>{{i.substr(autocomplete.length)}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Pada script diatas terdapat beberapa event pada sebuah input HTML seperti :
- @blur
- @focus
Jika sudah sekarang tambahkan sebuah style CSS agar tampilanya menarik, coba ketikkan CSS berikut ini:
* { padding: 0;
margin:0;
}
body {
font: 16px Arial;
}
.container{
width: 450px;
margin: auto;
box-sizing: border-box;
}
.autocomplete {
position: relative;
display: inline-block;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
top: 100%;
left: 0;
right: 0;
width: 150%;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #dedede;
}
.autocomplete-items div:hover {
background-color: #d0fbf9;
}
.autocomplete-active {
background-color: #1adddc !important;
color: #ffffff;
}
input{
border:1px solid transparent;
width: 150%;
background-color:#d0fbf9 ;
padding:10px;
font-size: 17px;
}
Langkah selanjutnya yang ditunggu dan penting yaitu script yang dipakai berikut ini sahabat tambahkan sebelum tag penutup body script javascriptnya berikutnya :
<script>
new Vue({
data(){
return{
currentFocus: '',
autocomplete: '',
onBlur: true,
onFocus: false,
arr: [
"HTML CSS",
"Bootstrap",
"PHP MySQL",
"Javascript",
"Ajax",
"JQuery",
"Laravel",
"Angular",
"Codeigniter"
]
}
},
mounted(){
var vm = this;
document.addEventListener("click", function(e){
vm.onBlur ?vm.onFocus = false: false});
},
methods:{
addActive(){
var vm = this;
if (!vm.array) return false;
if (vm.currentFocus >= vm.array.length) vm.currentFocus = 0;
if (vm.currentFocus < 0) vm.currentFocus = (vm.array.length - 1);
},
keyDown(e){
var vm = this;
if (e.keyCode == 40) {
vm.currentFocus++;
vm.addActive()
} else if (e.keyCode == 38) {
vm.currentFocus--;
vm.addActive()
}
}
}
}).$mount('#app')
</script>
Pada data array nanti sahabat bisa isi sesuai dengan keperluan saja saya memberikan sedikit contoh seperti diatas.
Jika sudah semua diketikkan coba jalankan pada browser sahabat, apabila benar maka akan seperti berikut tampilannya:
Demikian pembahasan artikel kali ini tentang Cara Membuat Autocomplete dengan VueJs ,semoga bermanfaat serta jangan lupa tetap semangat dan sampai jumpa di tutorial selanjutnya.
terima kasih.