Cách tạo tự động hoàn thành

Học cách tạo tính năng tự động hoàn thành.

Tạo biểu mẫu tự động hoàn thành

Bước 1 - Thêm HTML:

<!-- Đảm bảo rằng biểu mẫu đã tắt tính năng tự động hoàn thành: -->
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Quốc gia">
  </div>
  <input type="submit">
</form>

Bước 2 - Tạo mảng JavaScript:

mảng chứa tất cả các quốc gia và khu vực trên thế giới:

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, Côte 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","Úc, Sri Lanka, St Kitts và Nevis, St Lucia, St Vincent, Sudan, Suriname, Swaziland, Thụy Điển, Thụy Sĩ, Syria, Đài Loan, Tadjikistan, Tanzania, Thái Lan, Timor L'Este, Togo, Tonga, Trinidad và Tobago, Tunisia, Thổ Nhĩ Kỳ, Turkmenistan, Turks và Caicos, Tuvalu, Uganda, Ukraine, Các Tiểu vương quốc Ả Rập Thống nhất, Vương quốc Anh, Hoa Kỳ, Uruguay, Uzbekistan, Vanuatu, Vatican, Venezuela, Việt Nam, Quần đảo Virgin (Mỹ), Yemen, Zambia, Zimbabwe;

Bước 3 - Thêm CSS:

Hộp chứa phải có vị trí tương đối.

* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /* Hộp chứa phải có vị trí tương đối: */
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  keo dính: 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;
  /* Đặt mục tự động hoàn thành cùng độ rộng với hộp chứa: */
  top: 100%;
  left: 0;
  phải: 0;
}
.autocomplete-items div {
  keo dính: 10px;
  con trỏ: pointer;
  màu nền: #fff;
  viền dưới: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /* Khi con trỏ chuột nằm trên mục: */
  màu nền: #e9e9e9;
}
.autocomplete-active {
  /* Khi sử dụng phím mũi tên để duyệt qua các mục: */
  màu nền: DodgerBlue !important;
  màu: #ffffff;
}

Bước 4 - Thêm JavaScript:

function autocomplete(inp, arr) {
  /* Hàm tự hoàn thành cần hai tham số, một là phần tử trường văn bản và một là mảng giá trị có thể tự hoàn thành: */
  var currentFocus;
  /* Hàm được thực hiện khi ai đó viết vào trường văn bản: */
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /* Đóng bất kỳ danh sách giá trị tự hoàn thành nào đã mở: */
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /* Tạo một DIV chứa các mục (giá trị): */
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /* Thêm DIV này làm phần tử con của hộp tự hoàn thành:*/
      this.parentNode.appendChild(a);
      /* Duyệt qua mỗi mục trong mảng... */
      for (i = 0; i < arr.length; i++) {
        /* Kiểm tra mục có bắt đầu bằng các chữ cái tương tự như giá trị trường văn bản: */
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /* Tạo một元素 DIV cho mỗi phần tử khớp: */
          b = document.createElement("DIV");
          /* Đánh dấu các ký tự khớp bằng chữ in đậm: */
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /* Chèn một trường nhập để lưu trữ giá trị phần tử mảng hiện tại: */
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /* Khi ai đó nhấp vào giá trị mục (元素 DIV) thực hiện một hàm: */
              b.addEventListener("click", function(e) {
              /* Chèn giá trị trường văn bản tự động hoàn thành: */
              inp.value = this.getElementsByTagName("input")[0].value;
              /* Đóng danh sách giá trị tự động hoàn thành, hoặc bất kỳ danh sách giá trị tự động hoàn thành nào khác đang mở: */
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /* Khi ai đó nhấn phím trên bàn phím, thực hiện một hàm: */
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /* Nếu nhấn phím mũi tên xuống, tăng biến currentFocus: */
        currentFocus++;
        /* Và làm nổi bật mục hiện tại hơn: */
        addActive(x);
      } else if (e.keyCode == 38) { //lên
        /* Nếu nhấn phím mũi tên lên, giảm biến currentFocus: */
        currentFocus--;
        /* Và làm nổi bật mục hiện tại hơn: */
        addActive(x);
      } else if (e.keyCode == 13) {
        /* Nếu nhấn phím ENTER, ngăn chặn việc gửi biểu mẫu: */
        e.preventDefault();
        if (currentFocus > -1) {
          /* Và mô phỏng nhấp vào mục "hoạt động": */
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /* Chức năng phân loại các mục thành "hoạt động": */
    if (!x) return false;
    /* Đầu tiên loại bỏ lớp "active" từ tất cả các mục: */
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /* Thêm lớp "autocomplete-active": */
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /* Chức năng loại bỏ lớp "autocomplete-active" từ tất cả các mục tự động hoàn thành: */
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /* Đóng tất cả các danh sách tự động hoàn thành trong tài liệu, trừ danh sách được truyền làm tham số: */
    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]);
    }
  }
}
/* Chức năng được thực hiện khi ai đó nhấp vào tài liệu */
document.addEventListener("click", function (e) {
    closeAllLists(e.target);
});
}

Bước 5 - Kích hoạt tính năng tự động hoàn thành trên "myInput":

Chuyển đổi mảng quốc gia làm autocomplete Chuyển đổi tham số thứ hai:

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

Thử ngay