如何创建自动完成

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

自动完成

请开始输入：

Kokeile itse

创建自动完成表单

第一步 - 添加 HTML：

第二步 - 创建 JavaScript 数组：

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

var countries = ["Afganistan","Albania","Alžeeria","Andorra","Angola","Anguilla","Antigua ja Barbuda","Argentiina","Armenia","Aruba","Australia","Itävalta","Azerbaidžan","Bahamit","Bahrain","Bangladesh","Barbados","Valko-Venäjä","Belgia","Belize","Benin","Bermuda","Bhutani","Bolivia","Bosnia ja Hertsegovina","Botswana","Brasilia","Brittiläiset Neitsytmaat","Brunei","Bulgaria","Burkina Faso","Burundi","Kambodža","Kamerun","Kanada","Kap Verde","Caymanin saaret"," Keski-Afrikan tasavalta","Tšad","Tsile","Kiina","Kolumbia","Kongon tasavalta","Cookinsaaret","Kosta Rikka, Côte d'Ivoire, Kroatia, Kuuba, Curaçao, Kypros, Tšekin tasavalta, Tanska, Djibouti, Dominica, Dominikaaninen tasavalta, Ekvatorivaltio, Egypti, El Salvador, Guinean rannikko, Eritrea, Viro, Etiopia, Falklandinsaaret, Färsunds- ja Oркneysaaret, Fidži, Suomi, Ranska, Ranskan Polynesia, Ranskan Länsi-Intia, Gabon, Gambia, Georgia, Saksa, Ghana, Gibraltar, Kreikka, Grönlanti, Grenada, Guam, Guatemala, Guernsey, Guinea, Guinea-Bissau, Guyana, Haiti, Honduras, Hongkong, Unkari, Islanti, Intia,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, NauroNepal, Alankomaat, Alankomaiden Antillit, Uusi-Kaledonia, Uusi-Seelanti, Nicaragua, Niger, Nigeria, Pohjois-Korea, Norja, Oman, Pakistan, Palau, Palestiina, Panama, Papua-Uusi-Guinea, Paraguay, Peru, Filippiinit, Puola, Portugali, Puerto Rico, Qatar, Réunion, Romania, Venäjä, Ruanda, Saint Pierre ja Miquelon, Samoat, San Marino, São Tomé ja Príncipe, Saudi-Arabia, Senegal, Serbia, Seychellit, Sierra Leone, Singapore, Slovakia, Slovenia, Solomoninsaaret, Somalia, Etelä-Afrikka, Etelä-Korea, Etelä-Sudan,Espanja, Sri Lanka, St. Kitts ja Nevis, St. Lucia, St. Vincent, Sudan, Suriname, Swaziland, Ruotsi, Sveitsi, Syyria, Taiwan, Tadžikistan, Tansania, Thaimaa, Timor-Leste, Togo, Tonga, Trinidad ja Tobago, Tunisia, Turkki, Turkmenistan, Turkiset ja Caicos, Tuvalu, Uganda, Ukraina, Yhdistyneet arabiemiirikunnat, Yhdistynyt kuningaskunta, Yhdysvallat, Uruguay, Uzbekistan, Vanuatu, Vatikaanivaltio, Venezuela, Vietnam, Yhdysvaltain Neitsytsaaret, Jemen, Zambia, Zimbabwe;

Vaihe 3 - Lisää CSS:

Kontti on oltava suhteellisesti sijoitettu.

* { box-sizing: border-box; }
body {
  fontti: 16px Arial;
}
.autocomplete {
  /* Kontti on oltava suhteellisesti sijoitettu: */
  sijainti: suhteellinen;
  näyttö: inline-block;
}
input {
  reuna: 1px solida läpinäkyvä;
  takabackgrund: #f1f1f1;
  padding: 10px;
  fonttikoko: 16px;
}
input[type=text] {
  takabackgrund: #f1f1f1;
  leveys: 100%;
}
input[type=submit] {
  takabackgrund: DodgerBlue;
  väri: #fff;
}
.autocomplete-items {
  sijainti: absoluuttinen;
  reuna: 1px solida #d4d4d4;
  alareuna: none;
  yläreuna: none;
  z-index: 99;
  /* Sijoita automaattiset valinnat konttin kanssa samanleiseen leveyteen: */
  ylä: 100%;
  vasen: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /* Kun hiiren osoitin on projektin päällä: */
  background-color: #e9e9e9;
}
.autocomplete-active {
  /* Kun valitaan nuolinäppäimellä projektia: */
  background-color: DodgerBlue !important;
  color: #ffffff;
}

Neljäs vaihe - Lisää JavaScript:

function autocomplete(inp, arr) {
  /* Automaattisen täydennyksen funktio tarvitsee kaksi parametria, yhden tekstikenttäelementille ja toisen mahdollisille täydennyksille: */
  var currentFocus;
  /* Suoritettava funktio, kun joku kirjoittaa tekstikenttään: */
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /* Sulje kaikki avoinna olevat automaattisen täydennyksen arvojen listat */
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /* Luo DIV-elementti, joka sisältää kohteita (arvoja): */
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /* Lisää tämä DIV-elementti automaattisen täydennyksen konttin lapsenä:*/
      this.parentNode.appendChild(a);
      /* Käy läpi taulukon jokainen kohta... */
      for (i = 0; i < arr.length; i++) {
        /* Tarkista, onko kohta alkanut tekstillä, joka on sama kuin tekstikentän arvo: */
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /* Luo DIV-elementti jokaiselle vastaavalle elementille: */
          b = document.createElement("DIV");
          /* Korosta vastaavat kirjaimet粗体: */
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /* Lisää syötteenäyttöala tallentamaan nykyisen taulukon kohdan arvon: */
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /* Suoritetaan funktio, kun joku napsauttaa arvoa (DIV-elementtiä): */
              b.addEventListener("click", function(e) {
              /* Lisää automaattisen täydennysarvojen tekstikentän arvo: */
              inp.value = this.getElementsByTagName("input")[0].value;
              /* Sulje automaattinen täydennysarvojen luettelo tai mikä tahansa muu avoin automaattinen täydennysarvojen luettelo: */
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /* Suoritetaan funktio, kun joku painaa näppäintä näppäimistöllä: */
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /* Jos painetaan alasnuolinäppäintä, lisää currentFocus-muuttujaa: */
        currentFocus++;
        /* Ja tekee nykyisestä kohteesta selkeämmän: */
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /* Jos painetaan ylösnuolinäppäintä, vähennä currentFocus-muuttujaa: */
        currentFocus--;
        /* Ja tekee nykyisestä kohteesta selkeämmän: */
        addActive(x);
      } else if (e.keyCode == 13) {
        /* Jos painetaan ENTER-näppäintä, estetään lomakkeen lähettäminen: */
        e.preventDefault();
        if (currentFocus > -1) {
          /* 并模拟点击“活动”项目：*/
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /* 将项目分类为“活动”的函数：*/
    if (!x) return false;
    /* 首先删除所有项目中的 "active" 类：*/
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /* 添加 "autocomplete-active" 类：*/
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /* 从所有自动完成项中删除 "active" 类的函数：*/
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(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) {
    closeAllLists(e.target);
});
}

第五步 - 在 "myInput" 上启用自动完成功能：

将国家数组作为 autocomplete 函数的第二个参数传递：

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

Kokeile itse