πώς να δημιουργήσετε αυτόματη συμπλήρωση

μαθήματα για τη δημιουργία λειτουργίας αυτόματης συμπλήρωσης.

δημιουργία φόρμας αυτόματης συμπλήρωσης

πρώτο βήμα - προσθήκη HTML:

<!-- Βεβαιώστε ότι η φόρμα έχει απενεργοποιήσει τη λειτουργία αυτόματης συμπλήρωσης: -->
<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>

τέταρτο βήμα - δημιουργία JavaScript ακολουθίας:

παράλειψη

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","Κόστα Ρίκα, Κότε Ντι Βιόρε, Κροατία, Κούβα, Κουρασάο, Κύπρος, Τσεχία, Δανία, Τζιμπούτι, Ντομινίκα, Δομινικανή Δημοκρατία, Εκουαδόρ, Αίγυπτος, Ελ Σαλβαδόρ, Γουινέα Εκουatorial, Ερυθραία, Εσθονία, Εθιόπεια, Νήσοι Φalkland, Νήσοι Faroe, Φίτζι, Φινλανδία, Γαλλία, Γαλλική Πολυνησία, Γαλλικές Αντίλλες, Γαμπόν, Γκάμπια, Γεωργία, Γερμανία, Γκάνα, Γιβραλτάρ, Ελλάδα, Γρενάδα, Γουάμ, Γουatemala, Γέρνσεϊ, Γουινέα, Γουινέα Μπισσάου, Γουιάνα, Χαϊτί, Χονδούρες, Χονγκ Κονγκ, Ουγγαρία, 冰岛, Ινδία,Η Ινδονησία, η Ιράν, η Ιράκ, η Ιρλανδία, το νησί του Μαν, το Ισραήλ, η Ιταλία, η Τζαμάικα, το Ιαπωνία, το Τζέρσεϊ, η Ιορδανία, το Καζακστάν, το Κένυα, το Κιριμπάτι, το Κοσσοβό, το Κουwait, το Κιργιστάν, η Λάος, η Λετονία, η Λιβανία, το Λεςοθο, η Λιβερία, η Λιβύη, το Λιχτενστάιν, η Λιθουανία, το Λουξεμβούργο, το Μακάο, η Μακεδονία, η Μαδαγασکار, το Μαλάουι, η Μαλαισία, τα Μαλdives, το Μάλι, η Μάλτα, οι Ινδονησιακές Νήσοι, η Μαυριτανία, το Μαυρίτιο, το Μεξικό, η Μικρονησία, η Μολδαβία, το Μονακό, η Μογγολία, το Μαυροβούνιο, το Μοντσεράτ, το Μαρόκο, το Μοζαμβίκη, η Μιανμάρ, η Ναμibia, το ΝαουρούΝεπάλ, Ολλανδία, Ολλανδικές Αντίλλες, Νέα Καaledονία, Νέα Ζηλανδία, Νικαράγουα, Νιγηρία, Βόρεια Κορέα, Νορβηγία, Ομάν, Πακιστάν, Παλάου, Παλαιστίνη, Παναμά, Παπούα Νέα Γουινέα, Παραγουάη, Περού, Φιλιππίνες, Πολωνία, Πορτογαλία, Πουέρτο Ρίκο, Κατάρ, Ρεюνيون, Ρουμανία, Ρωσία, Ρουάντα, Σαιντ Πιερ και Μικελόν, Σαμόα, Σαν Μαρίνο, Σάντο Τομέ και Πρίνσιπε, Σαουδική Αραβία, Σενεγάλη, Σερβία, Σεϋχέλλες, Σιέρα Λεόνε, Σιγκαπούρη, Σλοβακία, Σλοβενία, Σολομώνες Νήσοι, Σομαλία, Νότια Αφρική, Νότια Κορέα, Νότιο Σουδάν,Ελλάδα,"Σρι Λάνκα","Σαιντ Κιτς και Νεβίς","Σαιντ Λου西亚","Σαιντ Βινσέντ","Σουδάν","Suriname","Swaziland","Σουηδία","Σイス","Σύρια","Τάιβάν","Τατζικιστάν","Τανζανία","Τailand","Τιμόρ Λέστε","Τόγκο","Τόνγκα","Τρινιντάντ και Τομπάγκο","Τυνησία","Τουρκία","Τουρκμενιστάν","Τουρκς και Κάικος","Τουβουλάου","Ουγκάντα","Ουκρανία","Ηνωμένα Αραβικά Εμιράτα","Ηνωμένο Βασίλειο","Ηνωμένες Πολιτείες της Αμερικής","Ουρουγουάη","Ουζμπεκιστάν","Βανουάτου","Βατικανό","Βενεζουέλα","Βιετνάμ","Βερζίνι Ινς (US)","Γιουμένη","Ζαμβία","Ζιμπάμπουε"];

Τρίτο βήμα - Προσθήκη CSS:

Το κουτί πρέπει να έχει σχετική τοποθεσία.

* { box-sizing: border-box; }
σώμα {
  γραμματοσειρά: 16px Arial;
}
.autocomplete {
  /* Το κουτί πρέπει να έχει σχετική τοποθεσία: */
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid παραπάνω διαφανές;
  χρώμα περιβάλλοντος: #f1f1f1;
  παράθεση: 10px;
  μεγεθύς γραμματοσειράς: 16px;
}
input[type=text] {
  χρώμα περιβάλλοντος: #f1f1f1;
  πλάτος: 100%;
}
input[type=submit] {
  χρώμα περιβάλλοντος: DodgerBlue;
  χρώμα: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /* Αυτόματα θα τοποθετηθεί η επιλογή που θα ολοκληρωθεί με την ίδια πλάτος του κουτιού: */
  κορυφή: 100%;
  αριστερά: 0;
  δεξιά: 0;
}
.autocomplete-items div {
  παράθεση: 10px;
  απόδειξη του δακτυλικού λάβδιου: pointer;
  χρώμα φόντου: #fff;
  χαράκτημα κάτω από το όριο: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /* Όταν ο αριθμός του ποντικιού είναι πάνω στο στοιχείο: */
  χρώμα φόντου: #e9e9e9;
}
.autocomplete-active {
  /* Όταν περιηγείτε στα στοιχεία με τα πλήκτρα κατεύθυνσης: */
  χρώμα φόντου: DodgerBlue !important;
  χρώμα: #ffffff;
}

Τέταρτο βήμα - Προσθέστε JavaScript:

function autocomplete(inp, arr) {
  /* Η συνάρτηση αυτόματης συμπλήρωσης χρειάζεται δύο παραμέτρους, το στοιχείο πεδίου κειμένου και το πίνακα των πιθανών τιμών που μπορεί να συμπληρωθούν: */
  var currentFocus;
  /* Η συνάρτηση που εκτελείται όταν κάποιος γράφει στο πεδίο κειμένου: */
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /* Κλείστε οποιαδήποτε ανοιχτή λίστα τιμών αυτόματης συμπλήρωσης */
      closeAllLists();
      Εάν (!val) { return false;}
      currentFocus = -1;
      /* Δημιουργήστε ένα στοιχείο DIV που περιέχει τα στοιχεία (τιμές): */
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /* Προσθέστε αυτό το στοιχείο DIV ως υποδοχή του διανύσματος αυτόματης συμπλήρωσης:*/
      this.parentNode.appendChild(a);
      /* Περιηγηθείτε σε κάθε στοιχείο του πίνακα... */
      για (i = 0; i < arr.length; i++) {
        /* Ελέγξτε αν η επιχείρηση ξεκινά με τα γράμματα που είναι ταυτόσημα με την τιμή του πεδίου κειμένου: */
        Εάν (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /* Δημιουργήστε ένα στοιχείο DIV για κάθε ταιριάζοντα στοιχείο: */
          b = document.createElement("DIV");
          /* Βελτιώστε σε έντονες την ταινία που ταιριάζει: */
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /* Εισάγετε ένα πεδίο εισαγωγής για να αποθηκεύσετε τη τιμή του τρέχοντος στοιχείου του πίνακα: */
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /* Όταν κάποιος κάνει κλικ στη τιμή του στοιχείου (εлемент DIV) εκτελείται μια συνάρτηση: */
              b.addEventListener("click", function(e) {
              /* Εισάγετε τη τιμή του πεδίου αυτόματης συμπλήρωσης: */
              inp.value = this.getElementsByTagName("input")[0].value;
              /* Κλείστε τη λίστα τιμών αυτόματης συμπλήρωσης, ή οποιαδήποτε άλλη ανοιχτή λίστα τιμών αυτόματης συμπλήρωσης: */
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /* Όταν κάποιος πατηθεί ένα πλήκτρο στο πληκτρολόγιο, εκτελείται μια συνάρτηση: */
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /* Αν πατηθεί το πλήκτρο κατεύθυνσης κάτω, αυξήστε τη μεταβλητή currentFocus: */
        currentFocus++;
        /* Και καθιστεί πιο εμφανές το τρέχον στοιχείο: */
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /* Αν πατηθεί το πλήκτρο βελτίωσης, μειώστε τη μεταβλητή currentFocus: */
        currentFocus--;
        /* Και καθιστεί πιο εμφανές το τρέχον στοιχείο: */
        addActive(x);
      } else if (e.keyCode == 13) {
        /* Αν πατηθεί το κουμπί ENTER, εμποδιστεί η υποβολή της φόρμας: */
        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>

Δοκιμάστε το προσωπικά