Autocomplete dengan Javascript ~ Pemrograman dan Teknologi

Untuk membuat autocomplete dalam javascript, yang pertama harus kita tambahkan adalah formnya. Kemudian, kita perlu menambahkan array di dalam scriptnya. Selain itu, kita juga perlu memberikan atribut autocomplete dengan nilai "off" pada tag <form> supaya tidak ada auto complete berdasarkan apapun yang disimpan browser.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <STYLE>
    .autocomplete-active{
        background : green;
    }
 
    .autocomplete-items{
        background : yellow;
        padding : 4px;
        border : red double 4px;
    }
    </STYLE>
</HEAD>
<BODY>
    <form autocomplete="off" action="/">
        <div class="autocomplete" style="width:300px;">
            <input id="inputku" type="text" name="Buah-buahan" placeholder="Buah">
        </div>
        <input type="submit">
    </form>
    <SCRIPT>
        var buah = ["Apel", 
"Belimbing", "Cempedak", 
"Cempoka", "Ceri", "Cermai", 
"Duku",
"Jeruk",
"Kelapa", "Kedondong",
"Lemon", "Leci", "Langsat",
"Mangga", "Manggis",
"Nangka",
"Pepaya",
"Rambutan",
"Sirsak", "Srikaya",
"Timun",
];
    </SCRIPT>
</BODY>
</HTML>

Selanjutnya, tambahkan beberapa event listener yang ditempatkan dalam satu function. Ganti script dalam kode HTML di atas supaya jadi seperti di bawah ini!

var buah = ["Apel", 
"Belimbing", "Cempedak", 
"Cempoka", "Ceri", "Cermai", 
"Duku",
"Jeruk",
"Kelapa", "Kedondong",
"Lemon", "Leci", "Langsat",
"Mangga", "Manggis",
"Nangka",
"Pepaya",
"Rambutan",
"Sirsak", "Srikaya",
"Timun",
];
function autocomplete(inp, arr) {
    var currentFocus;
    inp.addEventListener("input", function(e) {
 var a, b, i, val = this.value;
 var jtampil=0;
 tutup_semua_daftar();
 if (!val) { return false;}
 currentFocus = -1;
 a = document.createElement("DIV");
 a.setAttribute("id", this.id + "autocomplete-list");
 this.parentNode.appendChild(a);
 for (i = 0; i < arr.length; i++) {
     if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
  b = document.createElement("DIV");
  b.innerHTML = "<b>" + arr[i].substr(0, val.length) + "</b>";
  b.innerHTML += arr[i].substr(val.length);
  b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
  b.addEventListener("click", function(e) {
      inp.value = this.getElementsByTagName("input")[0].value;
      tutup_semua_daftar();
  });
  a.appendChild(b);
  jtampil++;
     }
 }
 if(jtampil>0)a.setAttribute("class", "autocomplete-items");
    });
    
    inp.addEventListener("keydown", function(e) {
 var x = document.getElementById(this.id + "autocomplete-list");
 if (x) x = x.getElementsByTagName("div");
 if (e.keyCode == 40) {
     currentFocus++;
     addActive(x);
 } else if (e.keyCode == 38) {
     currentFocus--;
     addActive(x);
 } else if (e.keyCode == 13) {
     e.preventDefault();
     if (currentFocus > -1) {
    if (x) x[currentFocus].click();
     }
 }
    });
    
    function addActive(x) {
 if (!x) return false;
 for (var i = 0; i < x.length; i++) {
     x[i].classList.remove("autocomplete-active");
 }
 if (currentFocus >= x.length) currentFocus = 0;
 if (currentFocus < 0) currentFocus = (x.length - 1);
 x[currentFocus].classList.add("autocomplete-active");
    }
    
    function tutup_semua_daftar(elmnt) {
 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]);
  }
     }
 }
 document.addEventListener("click", function (e) {
 tutup_semua_daftar(e.target);
    });
} 

autocomplete(document.getElementById("inputku"), buah);

Selanjutnya, kalian seharusnya akan bisa melihat hasilnya. Kalian bisa mengubah tampilan daftar-nya dengan CSS jika kalian mau.