如何创建自动完成

学习如何创建自动完成功能。

创建自动完成表单

第一步 - 添加 HTML：

第二步 - 创建 JavaScript 数组：

包含世界上所有国家/地区的数组：

var negara = ["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","Republik Afrika Tengah","Chad","Chile","China","Kolombia","Kongo","Cook Islands","Kosta Rika, Kote D Ivoire, Kroatia, Kuba, Curacao, Siprus, Republik Ceko, Denmark, Djibouti, Dominika, Republik Dominika, Ekuador, Mesir, El Salvador, Guinea Khatulistiwa, Eritrea, Estonia, Etiopia, Pulau Falkland, Pulau Faroe, Fiji, Finland, Perancis, Perancis Polinesia, Perancis Barat Daya, Gabon, Gambia, Georgia, Jerman, Ghana, Gibraltar, Yunani, Grenland, Grenada, Guam, Guatemala, Guernsey, Guinea, Guinea-Bissau, Guyana, Haiti, Honduras, Hong Kong, Hungaria, Island, India,Indonesia, Iran, Irak, Ireland, Pulau Man, Israel, Itali, Jamaica, Jepang, Jersey, Jordan, Kazakhstan, Kenya, Kiribati, Kosovo, Kuwait, Kirgizstan, Laos, Latvia, Lebanon, Lesotho, Liberia, Libia, Liechtenstein, Lithuania, Luxembourg, Macau, Makedonia, Madagaskar, Malawi, Malaysia, Maldives, Mali, Malta, Pulau Marshall, Mauritania, Mauritius, Meksiko, Mikronesia, Moldova, Monaco, Mongolia, Montenegro,Montserrat, Maroko, Mozambik, Myanmar, Namibia, NauroNepal, Belanda, Belanda Barat, Kaledonia Baru, Selandia Baru, Nikaragua, Niger, Nigeria, Korea Utara, Norwegia, Oman, Pakistan, Palau, Palestina, Panama, Papua Nugini, Paraguay, Peru, Filipina, Poland, Portugal, Puerto Rico, Qatar, Reunion, Rumania, Rusia, Rwanda, Saint Pierre & Miquelon, Samoa, San Marino, Sao Tome and Principe, Arab Saudi, Senegal, Serbia, Seychelles, Sierra Leone, Singapura, Slowakia, Slovenia, Kepulauan Solomon, Somalia, Afrika Selatan, Korea Selatan, Sudan Selatan,Spanyol, Sri Lanka, St. Kitts & Nevis, St. Lucia, St. Vincent, Sudan, Suriname, Swaziland, Swedia, Switzerland, Suriah, Taiwan, Tadjikistan, Tanzania, Thailand, Timor L'Este, Togo, Tonga, Trinidad & Tobago, Tunisia, Turki, Turkmenistan, Turks & Caicos, Tuvalu, Uganda, Ukraina, Uni Emirat Arab, Inggris, Amerika Serikat, Uruguay, Uzbekistan, Vanuatu, Kota Suci, Venezuela, Vietnam, Wilayah Virgina (AS), Yaman, Zambia, Zimbabwe;

Tahap ketiga - Tambahkan CSS: }}

Kontainer harus memiliki lokasi 'relatif'.

* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /* Kontainer harus berada di posisi relatif: */
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  tinggi: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /* Memposisikan item otomatis yang akan selesai sama dengan lebar kontainer: */
  top: 100%;
  left: 0;
  kanan: 0;
}
.autocomplete-items div {
  tinggi: 10px;
  tombol penunjuk: pointer;
  background-color: #fff;
  batas bawah: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /* Ketika tetikus menempel di atas item: */
  background-color: #e9e9e9;
}
.autocomplete-active {
  /* Ketika digunakan tombol panah untuk menggulir melalui item: */
  background-color: DodgerBlue !important;
  warna: #ffffff;
}

Langkah keempat - Tambahkan JavaScript:

function autocomplete(inp, arr) {
  /* Fungsi penyelesaian otomatis memerlukan dua parameter, yaitu elemen kolom teks dan daftar kemungkinan nilai yang dapat disesuaikan: */
  var currentFocus;
  /* Fungsi yang dijalankan ketika seseorang menulis di kolom teks: */
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /* Menutup daftar nilai penyelesaian otomatis yang telah dibuka: */
      closeAllLists();
      jika (!val) { return false;}
      currentFocus = -1;
      /* Membuat elemen DIV yang mengandung item (nilai): */
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /* Menambahkan elemen DIV ini sebagai anak elemen kontainer penyelesaian otomatis:*/
      this.parentNode.appendChild(a);
      /* Melooping setiap item di dalam array... */
      for (i = 0; i < arr.length; i++) {
        /* Memeriksa apakah item apapun dimulai dengan huruf yang sama seperti nilai kolom teks: */
        jika (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /* Membuat elemen DIV untuk setiap elemen yang cocok: */
          b = document.createElement("DIV");
          /* Menambahkan huruf yang cocok dengan tebal: */
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /* Memasukkan bidang input untuk menyimpan nilai item array saat ini: */
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /* Menjalankan fungsi saat ada yang mengklik nilai item (elemen DIV): */
              b.addEventListener("click", function(e) {
              /* Memasukkan nilai bidang teks auto-complete: */
              inp.value = this.getElementsByTagName("input")[0].value;
              /* Menutup daftar nilai auto-complete, atau daftar nilai auto-complete yang lainnya yang terbuka: */
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /* Menjalankan fungsi saat ada yang menekan tombol papan ketik: */
  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 ke bawah ditekan, menambahkan variabel currentFocus: */
        currentFocus++;
        /* Juga membuat item saat ini lebih menonjol: */
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /* Jika tombol panah ke atas ditekan, mengurangi variabel currentFocus: */
        currentFocus--;
        /* Juga membuat item saat ini lebih menonjol: */
        addActive(x);
      } else if (e.keyCode == 13) {
        /* Jika tombol ENTER ditekan, mencegah pengiriman formulir: */
        e.preventDefault();
        if (currentFocus > -1) {
          /* Dan simulasikan klik ke item "aktif": */
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /* Fungsi untuk mengekatkan item menjadi "aktif": */
    if (!x) return false;
    /* Sebelumnya hapus klas "active" dari semua item: */
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /* Menambah klas "autocomplete-active": */
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /* Fungsi untuk menghapus klas "autocomplete-active" dari semua item penyelesaian otomatis: */
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /* Tutup semua daftar penyelesaian otomatis di dokumen, kecuali yang disampaikan sebagai parameter: */
    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]);
    }
  }
}
/* Fungsi yang dieksekusi saat seseorang menklik dokumen */
document.addEventListener("click", function (e) {
    closeAllLists(e.target);
});
}

Langkah kelima - Aktifkan fitur penyelesaian otomatis di "myInput":

Menyampaikan array negara sebagai autocomplete Parameter kedua yang disampaikan kepada fungsi:

<script>
autocomplete(document.getElementById("myInput"), countries);
</script>

Coba sendiri