Hoe een automatische voltooiingsfunctie te maken

Leer hoe je een automatische voltooiingsfunctie kunt maken.

Automatische voltooiing

Begin met typen:

Probeer het zelf

Maak een automatische voltooiingsformulier aan

Stap 1 - Voeg HTML toe:

<!-- Zorg ervoor dat het formulier de automatische voltooiing uitschakelt: -->
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Land">
  </div>
  <input type="submit">
</form>

Stap 2 - Maak een JavaScript-array aan:

Array van alle landen/gebieden ter wereld:

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 African Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica, Côte d'Ivoire, Kroatia, Cuba, Curaçao, Cyprus, Tsjechië, Denemarken, Djibouti, Dominica, Dominicaanse Republiek, Ecuador, Egypte, El Salvador, Equatoriaal-Guinea, Eritrea, Estland, Ethiopië, Falklandeilanden, Faeröer, Fiji, Finland, Frankrijk, Frans-Polynesië, Frans-West-Indië, Gabon, Gambia, Georgië, Duitsland, Ghana, Gibraltar, Griekenland, Groenland, Grenada, Guam, Guatemala, Guernsey, Guinea, Guinea-Bissau, Guyana, Haïti, Honduras, Hongkong, Hongarije, IJsland, India,Indonesié, Iran, Irak, Ierland, Man-eilanden, Israël, Italié, Jamaica, Japan, Jersey, Jordanié, Kazachstan, Kenia, Kiribati, Kosovo, Koewit, Kirgizié, Laos, Letland, Libanon, Lesotho, Liberia, Libié, Liechtenstein, Litouwen, Luxemburg, Macau, Macedonié, Madagaskar, Malawi, Maleisié, Malediven, Mali, Malta, Marshalleilanden, Mauritanié, Mauritius, Mexico, Micronesié, Moldavié, Monaco, Mongolié, Montenegro, Montserrat, Marokko, Mozambique, Myanmar, Namibié, NauroNepal, Nederland, Nederlandse Antillen, Nieuw-Caledonië, Nieuw-Zeeland, Nicaragua, Niger, Nigeria, Noord-Korea, Noorwegen, Oezbekistan, Pakistan, Palau, Palestina, Panama, Papoea-Nieuw-Guinea, Paraguay, Peru, Filipijnen, Polen, Portugal, Puerto Rico, Qatar, Réunion, Roemenië, Rusland, Rwanda, Saint-Pierre en Miquelon, Samoa, San Marino, São Tomé en Principe, Saoedi-Arabië, Senegal, Servië, Seychellen, Sierra Leone, Singapore, Slowakije, Slovenië, Solomonseilanden, Somalië, Zuid-Afrika, Zuid-Korea, Zuid-Sudan,Spanje, Sri Lanka, Saint Kitts en Nevis, Saint Lucia, Saint Vincent, Soedan, Suriname, Swaziland, Zweden, Zwitserland, Syrië, Taiwan, Tadzjikistan, Tanzania, Thailand, Timor-Leste, Togo, Tonga, Trinidad en Tobago, Tunesië, Turkije, Turkmenistan, Turks- en Caicoseilanden, Tuvalu, Oeganda, Oekraïne, Verenigde Arabische Emiraten, Verenigd Koninkrijk, Verenigde Staten van Amerika, Uruguay, Oezbekistan, Vanuatu, Vaticaanstad, Venezuela, Vietnam, Amerikaanse Maagdeneilanden, Jemen, Zambia, Zimbabwe;

Derde stap - Voeg CSS toe:

De container moet 'relatief' positie hebben.

* { box-sizing: border-box; }
lichaam {
  letter: 16px Arial;
}
.autocomplete {
  /* De container moet relatieve positie hebben: */
  positie: relatief;
  weergave: inline-blok;
}
input {
  rand: 1px solide transparent;
  achtergrondkleur: #f1f1f1;
  inschuiven: 10px;
  lettergrootte: 16px;
}
input[type=text] {
  achtergrondkleur: #f1f1f1;
  breedte: 100%;
}
input[type=submit] {
  achtergrondkleur: DodgerBlue;
  kleur: #fff;
}
.autocomplete-items {
  positie: absoluut;
  rand: 1px solide #d4d4d4;
  onderrand: none;
  bovenrand: none;
  z-index: 99;
  /* Het automatisch voltooien van items moet dezelfde breedte hebben als de container: */
  boven: 100%;
  links: 0;
  rechts: 0;
}
.autocomplete-items div {
  inschuiven: 10px;
  cursor: pointer;
  achtergrondkleur: #fff;
  ondersteunde rand: 1px solide #d4d4d4;
}
.autocomplete-items div:hover {
  /* Wanneer de muis over een item zweeft: */
  achtergrondkleur: #e9e9e9;
}
.autocomplete-active {
  /* Wanneer je met de pijltjestoetsen door de items bladert: */
  achtergrondkleur: DodgerBlue !important;
  kleur: #ffffff;
}

Stap vier - Voeg JavaScript toe:

function autocomplete(inp, arr) {
  /* De autocomplete-functie vereist twee parameters, een tekstveld-element en een array met mogelijke automatisch invulwaarden: */
  var currentFocus;
  /* Functie die wordt uitgevoerd wanneer iemand in het tekstveld typt: */
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /* Sluit elke al geopende lijst met automatisch invulwaarden */
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /* Maak een DIV-element aan dat items (waarden) bevat: */
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /* Voeg deze DIV-element als subelement van de automatisch invulcontainer toe:*/
      this.parentNode.appendChild(a);
      /* Loop door elke item in het array... */
      for (i = 0; i < arr.length; i++) {
        /* Controleer of het item begint met dezelfde letters als de waarde van het tekstveld: */
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /* Maakt een DIV-element voor elk overeenkomend element: */
          b = document.createElement("DIV");
          /* Maakt de overeenkomende letters vet: */
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /* Voeg een invoerveld toe om de waarde van het huidige arrayitem op te slaan: */
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /* Een functie wordt uitgevoerd wanneer iemand op een itemwaarde (DIV-element) klikt: */
              b.addEventListener("click", function(e) {
              /* Voeg de waarde van het tekstveld voor automatische volledigheid toe: */
              inp.value = this.getElementsByTagName("input")[0].value;
              /* Sluit de lijst met automatische volledigheidswaarden, of elke andere geopende lijst met automatische volledigheidswaarden: */
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /* Een functie wordt uitgevoerd wanneer iemand op een toets op het toetsenbord drukt: */
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /* Als de pijl omlaag-toets wordt ingedrukt, wordt de variabele currentFocus verhoogd: */
        currentFocus++;
        /* En maakt het huidige item duidelijker: */
        addActive(x);
      } else if (e.keyCode == 38) { // omhoog
        /* Als de pijl omhoog-toets wordt ingedrukt, wordt de variabele currentFocus verminderd: */
        currentFocus--;
        /* En maakt het huidige item duidelijker: */
        addActive(x);
      } else if (e.keyCode == 13) {
        /* Als de ENTER-toets wordt ingedrukt, wordt het indienen van het formulier voorkomen: */
        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>

Probeer het zelf