Hur man skapar automatiskt slutförande

Lär dig hur du skapar automatiskt slutförande.

Skapa ett automatiskt slutförande formulär

Steg 1 - Lägg till HTML:

<!-- Se till att formuläret har inaktiverat automatiskt slutförande: -->
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>

Steg 2 - Skapa JavaScript-arrayen:

innehåller en array med alla länder och regioner i världen:

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, Kôte d'Ivoire, Kroatien, Kuba, Curaçao, Cypern, Tjeckien, Danmark, Djibouti, Dominica, Dominikanska republiken, Ecuador, Egypten, El Salvador, Ekvatorialguinea, Eritrea, Estland, Etiopien, Falklandsöarna, Färöarna, Fidji, Finland, Frankrike, Franska Polynesien, Franska Västindien, Gabon, Gambia, Georgien, Tyskland, Ghana, Gibraltar, Grekland, Grönland, Grenada, Guam, Guatemala, Guernsey, Guinea, Guinea-Bissau, Guyana, Haiti, Honduras, Hong Kong, Ungern, Island, Indien,Indonesien, Iran, Irak, Irland, Isle of Man, Israel, Italien, Jamaica, Japan, Jersey, Jordan, Kazakstan, Kenya, Kiribati, Kosovo, Kuvait, Kirgizistan, Laos, Lettland, Libanon, Lesotho, Liberia, Libyen, Liechtenstein, Litauen, Luxemburg, Macau, Makedonien, Madagaskar, Malawi, Malaysia, Maldiverna, Mali, Malta, Marshallöarna, Mauretanien, Mauritius, Mexiko, Mikronesien, Moldavien, Monaco, Mongoliet, Montenegro, Montserrat, Marocko, Mosambik, Myanmar, Namibia, NauroNepal, Nederländerna, Nederländska Antillerna, Nya Kaledonien, Nya Zeeland, Nicaragua, Niger, Nigeria, Nordkorea, Norge, Oman, Pakistan, Palau, Palestina, Panama, Papua Nya Guinea, Paraguay, Peru, Filippinerna, Polen, Portugal, Puerto Rico, Qatar, Réunion, Rumänien, Ryssland, Rwanda, Saint Pierre och Miquelon, Samoa, San Marino, São Tomé och Príncipe, Saudiarabien, Senegal, Serbien, Seychellerna, Sierra Leone, Singapore, Slovakien, Slovenien, Salomonöarna, Somalia, Sydafrika, Sydkorea, Sydsudan,Spanien, Sri Lanka, St. Kitts och Nevis, St. Lucia, St. Vincent, Sudan, Surinam, Swaziland, Sverige, Schweiz, Syrien, Taiwan, Tadzjikistan, Tanzania, Thailand, Timor-Leste, Togo, Tonga, Trinidad och Tobago, Tunisien, Turkiet, Turkmenistan, Turks- och Caicosöarna, Tuvalu, Uganda, Ukraina, Förenade Arabemiraten, Förenade kungariket, Förenta staterna, Uruguay, Uzbekistan, Vanuatu, Vatikankommissionen, Venezuela, Vietnam, Amerikanska Jungfruöarna, Jemen, Zambia, Zimbabwe;

Steg 3 - Lägg till CSS:

Behållaren måste ha en 'relativ' placering.

* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /* Behållaren måste vara relativt placerad: */
  position: relativ;
  display: inline-block;
}
input {
  ram: 1px solid genomskinlig;
  bakgrundsfärg: #f1f1f1;
  marginal: 10px;
  fontstorlek: 16px;
}
input[type=text] {
  bakgrundsfärg: #f1f1f1;
  bredd: 100%;
}
input[type=submit] {
  bakgrundsfärg: DodgerBlue;
  färg: #fff;
}
.autocomplete-items {
  position: absolut;
  ram: 1px solid #d4d4d4;
  undre kant: inget;
  övre kant: inget;
  z-index: 99;
  /* Automatiskt justera automatiska alternativen till samma bredd som behållaren: */
  top: 100%;
  vänster: 0;
  höger: 0;
}
.autocomplete-items div {
  marginal: 10px;
  pekare: finger;
  bakgrundsfärg: #fff;
  nedre kant: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /* När muspekaren pekar på ett objekt: */
  bakgrundsfärg: #e9e9e9;
}
.autocomplete-active {
  /* När man navigerar bland objekten med piltangenterna:*/
  bakgrundsfärg: DodgerBlue !important;
  färg: #ffffff;
}

Fjärde steg - Lägg till JavaScript:

function autocomplete(inp, arr) {
  /* Autocomplete-funktionen behöver två parametrar, en textfältselement och en array med möjliga färdigställningsvärden: */
  var currentFocus;
  /* Funktion som körs när någon skriver i textfältet: */
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /* Stäng alla öppna färdigställningsvärde listor */
      closeAllLists();
      om (!val) { return false;}
      currentFocus = -1;
      /* Skapa ett DIV-element som innehåller objekt (värden): */
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /* Lägg till denna DIV-element som en underkomponent till den automatiska färdigställningskont容器的:*/
      this.parentNode.appendChild(a);
      /* Genomgå varje objekt i arrayen... */
      för (i = 0; i < arr.length; i++) {
        /* Kontrollera om objektet börjar med samma bokstäver som textfältets värde: */
        om (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /* Skapa en DIV-element för varje matchande element: */
          b = document.createElement("DIV");
          /* Gör matchande bokstäver fet: */
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /* Infoga en inmatningsruta för att spara värdet för aktuellt arrayelement: */
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /* Uppföra en funktion när någon klickar på ett objektvärde (DIV-element): */
              b.addEventListener("click", function(e) {
              /* Infoga värdet för automatiskt fyllnads textrutan: */
              inp.value = this.getElementsByTagName("input")[0].value;
              /* Stäng automatiska fyllnadslistor, eller alla andra öppna automatiska fyllnadslistor: */
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /* Uppföra en funktion när någon trycker en tangent på tangentbordet: */
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /* Om nedåtpilstangenten trycks ned, öka currentFocus-variabeln: */
        currentFocus++;
        /* Gör aktuellt projekt tydligare: */
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /* Om uppåtpilstangenten trycks ned, minska currentFocus-variabeln: */
        currentFocus--;
        /* Gör aktuellt projekt tydligare: */
        addActive(x);
      } else if (e.keyCode == 13) {
        /* Om ENTER-tangenten trycks ned, förhindra att skicka formuläret: */
        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>

Prova själv