How To

Cara Membuat Autocomplete

Di bawah ini kita akan mempelajari cara membuat autocomplete dengan CSS dan Javascript. Autocomplete biasanya digunakan untuk memperkirakan tulisan yang akan dimasukkan ke dalam field. Biasanya kita akan mengetik satu huruf lalu akan muncul beberapa prediksi teks yang akan kita masukkan ke dalam field tersebut.

Autocomplete

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

body {
  font: 16px Arial;  
}

/*container harus diposisikan relatif:*/.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: GreenYellow;
  color: #fff;
  cursor: pointer;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*posisikan item autocomplete dengan lebar yang sama dengan container:*/  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*saat mengarahkan kursor ke item:*/.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*saat menavigasi item menggunakan tombol panah:*/.autocomplete-active {
  background-color: GreenYellow ; 
  color: #FFFFFF; 
}
</style>
</head>     
<body>

<h2>Contoh Autocomplete</h2>

<p>Mulai mengetik:</p>

<!--Pastikan formulir tersebut menonaktifkan fungsi autocomplete:-->
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="NegaraKu" placeholder="Country">
  </div>
  <input type="submit">
</form>

<script>
function autocomplete(inp, arr) {
  /*fungsiautocomplete membutuhkan dua argumen,
   elemen field teks dan array yang kemungkinan nilai yang dilengkapi otomatis:*/  var currentFocus;
  /*eksekusi fungsi ketika pengguna menulis di field teks:*/  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /*tutup semua daftar nilai yang dilengkapi oleh autocomplete*/      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /*buat elemen DIV yang akan berisi item (nilai):*/      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /*menambahkan elemen DIV sebagai turunan dari penampung pelengkapan otomatis:*/      this.parentNode.appendChild(a);
      /*untuk setiap item dalam array ...*/      for (i = 0; i < arr.length; i++) {
        /*periksa apakah item tersebut dimulai dengan huruf yang sama dengan nilai field teks:*/        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /*buat elemen DIV untuk setiap elemen yang cocok:*/          b = document.createElement("DIV");
          /*buat huruf yang cocok menjadi tebal:*/          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /*masukkan kolom input yang akan menampung nilai item array saat ini:*/          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /*eksekusi fungsi ketika seseorang mengklik pada nilai item (elemen DIV):*/          b.addEventListener("click", function(e) {
              /*masukkan nilai untuk field teks autocomplete:*/              inp.value = this.getElementsByTagName("input")[0].value;
              /*tutup daftar nilai autocomplete, (atau daftar terbuka nilai autocomplete lainnya:*/              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /*eksekusi fungsi menekan tombol pada keyboard:*/  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /*Jika tombol panah DOWN ditekan,
         meningkatkan variabel currentFocus:*/        currentFocus++;
        /*dan dapat membuat item saat ini lebih terlihat:*/        addActive(x);
      } else if (e.keyCode == 38) { //up
        /*Jika tombol panah UP ditekan,
         turunkan variabel currentFocus:*/        currentFocus--;
        /*dan dapat membuat item saat ini lebih terlihat:*/        addActive(x);
      } else if (e.keyCode == 13) {
        /*Jika tombol ENTER ditekan, cegah formulir untuk dikirim,*/        e.preventDefault();
        if (currentFocus > -1) {
          /*dan simulasikan klik pada item "aktif":*/          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /*fungsi untuk mengklasifikasikan item sebagai "aktif":*/    if (!x) return false;
    /*mulai dengan menghapus kelas "aktif" pada semua item:*/    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /*tambahkan class "autocomplete-active":*/    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /*fungsi untuk menghapus class "aktif" dari semua item autocomplete:*/    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /*tutup semua daftar autocomplete di dokumen,
     kecuali yang diberikan sebagai argumen:*/    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]);
      }
    }
  }
  /*eksekusi fungsi ketika pengguna mengklik dokumen:*/  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
}

/*array yang berisi semua nama negara di dunia:*/var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];

/*memulai fungsi autocomplete di elemen "myInput" dan meneruskan array negara sebagai nilai autocomplete yang memungkinkan:*/autocomplete(document.getElementById("myInput"), countries);
</script>

</body>
</html>

Buat Form Autocomplete

Langkah 1) Tambahkan HTML:
Contoh

<!-- Pastikan form telah menonaktifkan fungsi autocompletes:-->
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="Negaraku" placeholder="Country">
  </div>
  <input type="submit">
</form>

Langkah 2) Buat Array JavaScript:
Contoh
Array dari semua negara di dunia:

/*array yang berisi semua nama negara di dunia:*/var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];

Langkah 3) Tambahkan CSS:
Penampung harus memiliki pemosisian “relatif”.
Contoh

* {
  box-sizing: border-box;
}

body {
  font: 16px Arial;  
}

/*container harus diposisikan relatif:*/.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;
  /*posisikan item autocomplete dengan lebar yang sama dengan container:*/  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*saat mengarahkan kursor ke item:*/.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*saat menavigasi item menggunakan tombol panah:*/.autocomplete-active {
  background-color: DodgerBlue ; 
  color: #ffffff; 
}

Langkah 4) Tambahkan JavaScript:
Contoh

function autocomplete(inp, arr) {
  /*fungsiautocomplete membutuhkan dua argumen,
   elemen field teks dan array yang kemungkinan nilai yang dilengkapi otomatis:*/  var currentFocus;
  /*eksekusi fungsi ketika pengguna menulis di field teks:*/  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /*tutup semua daftar nilai yang dilengkapi oleh autocomplete*/      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /*buat elemen DIV yang akan berisi item (nilai):*/      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /*menambahkan elemen DIV sebagai turunan dari penampung pelengkapan otomatis:*/      this.parentNode.appendChild(a);
      /*untuk setiap item dalam array ...*/      for (i = 0; i < arr.length; i++) {
        /*periksa apakah item tersebut dimulai dengan huruf yang sama dengan nilai field teks:*/        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /*buat elemen DIV untuk setiap elemen yang cocok:*/          b = document.createElement("DIV");
          /*buat huruf yang cocok menjadi tebal:*/          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /*masukkan kolom input yang akan menampung nilai item array saat ini:*/          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /*eksekusi fungsi ketika seseorang mengklik pada nilai item (elemen DIV):*/          b.addEventListener("click", function(e) {
              /*masukkan nilai untuk field teks autocomplete:*/              inp.value = this.getElementsByTagName("input")[0].value;
              /*tutup daftar nilai autocomplete, (atau daftar terbuka nilai autocomplete lainnya:*/              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /*eksekusi fungsi menekan tombol pada keyboard:*/  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /*Jika tombol panah DOWN ditekan,
         meningkatkan variabel currentFocus:*/        currentFocus++;
        /*dan dapat membuat item saat ini lebih terlihat:*/        addActive(x);
      } else if (e.keyCode == 38) { //up
        /*Jika tombol panah UP ditekan,
         turunkan variabel currentFocus:*/        currentFocus--;
        /*dan dapat membuat item saat ini lebih terlihat:*/        addActive(x);
      } else if (e.keyCode == 13) {
        /*Jika tombol ENTER ditekan, cegah formulir untuk dikirim,*/        e.preventDefault();
        if (currentFocus > -1) {
          /*dan simulasikan klik pada item "aktif":*/          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /*fungsi untuk mengklasifikasikan item sebagai "aktif":*/    if (!x) return false;
    /*mulai dengan menghapus kelas "aktif" pada semua item:*/    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /*tambahkan class "autocomplete-active":*/    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /*fungsi untuk menghapus class "aktif" dari semua item autocomplete:*/    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /*tutup semua daftar autocomplete di dokumen,
     kecuali yang diberikan sebagai argumen:*/    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]);
      }
    }
  }
  /*eksekusi fungsi ketika pengguna mengklik dokumen:*/  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
}

Langkah 5) Mulai Efek Autocomplete di “myInput”:
Contoh
Teruskan larik negara sebagai parameter kedua dari fungsi autocomplete:

/*memulai fungsi autocomplete di elemen "myInput" dan meneruskan array negara sebagai nilai autocomplete yang memungkinkan:*/autocomplete(document.getElementById("myInput"), countries);

Hanifah Nurbaeti

Share
Tags: formHow To