如何创建自动完成

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

自动完成

请开始输入：

Kendi kendine deney

创建自动完成表单

第一步 - 添加 HTML：

第二步 - 创建 JavaScript 数组：

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

var ülkeler = [\"Afganistan\",\"Arnavutluk\",\"Cezayir\",\"Andorra\",\"Angola\",\"Anguilla\",\"Antigua & Barbuda\",\"Arjantin\",\"Ermenistan\",\"Aruba\",\"Avustralya\",\"Avusturya\",\"Azerbaycan\",\"Bahamalar\",\"Bahrain\",\"Bangladeş\",\"Barbados\",\"Beyaz Rusya\",\"Belçika\",\"Belize\",\"Benin\",\"Bermuda\",\"Butan\",\"Bolivya\",\"Bosna & Hersek\",\"Botsvana\",\"Brezilya\",\"Britanya Virgin Adaları\",\"Brunei\",\"Bulgaristan\",\"Burkina Faso\",\"Burundi\",\"Kamboçya\",\"Kamerun\",\"Kanada\",\"Cape Verde\",\"Cayman Adaları\",\"Orta Afrika Cumhuriyeti\",\"Çad\",\"Şili\",\"Çin\",\"Kolombiya\",\"Kongo\",\"Cook Adaları\",\"Kosta Rika, Fildişi Sahili, Hırvatistan, Küba, Curaçao, Kıbrıs, Çek Cumhuriyeti, Danimarka, Cibuti, Dominika, Dominik Cumhuriyeti, Ekvador, Mısır, El Salvador, Ekvator Ginesi, Eritrea, Estonya, Etiyopya, Falkland Adaları, Faroe Adaları, Fiji, Finlandiya, Fransa, Fransız Polinezyası, Fransız Batı Adaları, Gabon, Gambia, Gürcistan, Almanya, Gana, Gibraltar, Yunanistan, Grönland, Grenada, Guam, Guatemala, Guernsey, Gine, Gine-Bissau, Guyana, Haiti, Honduras, Hong Kong, Macaristan, İzlanda, Hindistan,Indonesia, İran, Irak, İrlanda, Man Adası, İsrail, İtalya, Jamaika, Japonya, Jersey, Ürdün, Kazakistan, Kenya, Kiribati, Kosova, Kuveyt, Kırgızistan, Laos, Letonya, Lübnan, Lesoto, Liberya, Libya, Liechtenstein, Litvanya, Lüksemburg, Makau, Makedonya, Madagaskar, Malavi, Malezya, Maldivler, Mali, Malta, Marshall Adaları, Moritanya, Moritus, Meksika, Mikronezya, Moldova, Monako, Moğolistan, Karadağ, Montserrat, Fas, Mozambik, Myanmar, Namibya, NauroNepal, Hollanda, Hollanda Yarımadası, Yeni Kaledonya, Yeni Zelanda, Nikaragua, Nijer, Nijerya, Kuzey Kore, Norveç, Umman, Pakistan, Palau, Filistin, Panama, Papua Yeni Gine, Paraguay, Peru, Filipinler, Polonya, Portekiz, Puerto Rico, Katar, Réunion, Romanya, Rusya, Ruanda, Saint Pierre ve Miquelon, Samoa, San Marino, São Tomé ve Príncipe, Suudi Arabistan, Senegal, Sırbistan, Seyşeller, Sierra Leone, Singapur, Slovakya, Slovenya, Solomon Adaları, Somali, Güney Afrika, Güney Kore, Güney Sudanİspanya,"Sri Lanka","St Kitts ve Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","İsveç","İsviçre","Suriye","Tayvan","Tacikistan","Tanzanya","Tayland","Timor L'Este","Togo","Tonga","Trinidad ve Tobago","Tunus","Türkiye","Türkmenistan","Turks ve Caicos","Tuvalu","Uganda","Ukrayna","Birleşik Arap Emirlikleri","Birleşik Krallık","Birleşik Devletler","Uruguay","Özbekistan","Vanuatu","Vatikan","Venezuela","Vietnam","Virgin Adaları (ABD)","Yemen","Zambiya","Zimbabwe"];

Üçüncü adım - CSS ekle:

容ere必须有“相对”定位。

* { kutu boyutlandırma: kutu içi; }
body {
  yazı: 16px Arial;
}
.autocomplete {
  /* 容ere必须相对定位： */
  konum: göreceli;
  görünüm: yatay;
}
input {
  çizgi: 1px solid şeffaf;
  arka plan rengi: #f1f1f1;
  padding: 10px;
  yazı boyutu: 16px;
}
input[type=text] {
  arka plan rengi: #f1f1f1;
  genişlik: 100%;
}
input[type=submit] {
  arka plan rengi: DodgerBlue;
  renk: #fff;
}
.autocomplete-items {
  konum: mutlak;
  çizgi: 1px solid #d4d4d4;
  alt çizgisi: yok;
  üst çizgisi: yok;
  z-index: 99;
  /* Otomatik tamamlama ögesini容器的相同宽度定位： */
  üst: 100%;
  sol: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /* Üzerinde fare işlevi yapıldığında: */
  background-color: #e9e9e9;
}
.autocomplete-active {
  /* Ok levhası ile projeleri dolaşırken: */
  background-color: DodgerBlue !important;
  color: #ffffff;
}

Dördüncü Adım - JavaScript Ekle:

function autocomplete(inp, arr) {
  /* Otomatik tamamlama fonksiyonu iki parametre gerektirir: bir metin alan elementi ve otomatik tamamlanabilecek olası değerlerin dizisi: */
  var currentFocus;
  /* Metin alanına yazılırken çalıştırılan fonksiyon: */
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /* Açık olan herhangi bir otomatik tamamlama değer listesini kapatır */
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /* Projeleri (değerleri) içeren bir DIV elementi oluşturur: */
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /* Bu DIV elementini otomatik tamamlama konteynerinin alt elementi olarak ekler:*/
      this.parentNode.appendChild(a);
      /* Dizideki her bir öğeyi dolaşır... */
      for (i = 0; i < arr.length; i++) {
        /* Denetim öğesi, metin alan değerinin aynı harflerle başlayıp başlamadığını kontrol eder: */
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /* Her eşleşme elementi için bir DIV elementi oluştur: */
          b = document.createElement("DIV");
          /* Eşleşen harfleri kalın hale getir: */
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /* Mevcut dizideki öğenin değerini saklamak için bir giriş alanı ekle: */
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /* Kişinin öğe değeri (DIV elementi) üzerine tıkladığında çalıştırılacak fonksiyon: */
              b.addEventListener("click", function(e) {
              /* Otomatik tamamlama metin alanının değerini ekle: */
              inp.value = this.getElementsByTagName("input")[0].value;
              /* Otomatik tamamlama değer listesini veya diğer açık otomatik tamamlama değer listelerini kapat: */
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /* Kişinin klavyede bir tuşa basarken bir fonksiyon çalıştır:*/
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /* Eğer aşağı ok tuşuna basılırsa, currentFocus değişkenini artır:*/
        currentFocus++;
        /* ve mevcut öğeyi daha belirgin hale getir:*/
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /* Eğer yukarı ok tuşuna basılırsa, currentFocus değişkenini azalt:*/
        currentFocus--;
        /* ve mevcut öğeyi daha belirgin hale getir:*/
        addActive(x);
      } else if (e.keyCode == 13) {
        /* Eğer ENTER tuşuna basılırsa, formun gönderilmesini engelle:*/
        e.preventDefault();
        if (currentFocus > -1) {
          /* ve "aktif" öğeyi tıklama işlemine benzetin: */
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /* Öğeleri "aktif" olarak sınıflandırma fonksiyonu: */
    if (!x) return false;
    /* Öncelikle tüm öğelerdeki "active" sınıfını silin: */
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /* "autocomplete-active" sınıfını ekleyin: */
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /* Tüm otomatik tamamlama öğelerinden "active" sınıfını kaldırma fonksiyonu: */
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /* Belgedeki tüm otomatik tamamlama listelerini kapat, ancak parametre olarak geçilen olandan başka: */
    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]);
    }
  }
}
/* Belge üzerine tıkladığında çalışacak fonksiyon */
document.addEventListener("click", function (e) {
    closeAllLists(e.target);
});
}

Beşinci Adım - "myInput" üzerinde otomatik tamamlama özelliğini etkinleştirin:

ülke dizisini autocomplete Fonksiyonun ikinci parametresi:

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

Kendi kendine deney