如何创建自动完成

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

创建自动完成表单

第一步 - 添加 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 Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","ਕੋਸਟਾ ਰੀਕਾ, ਕੋਟ ਦੀ ਆਇਵਰੀਅਰ, ਕਰੋੇਸ਼ੀਆ, ਕਿਊਬਾ, ਕੁਰਾਕਾਓ, ਸਾਈਪ੍ਰਸ, ਚੇਕ ਗਣਰਾਜ, ਡੈੱਨਮਾਰਕ, ਜਿਬੂਤੀ, ਡੋਮੀਨਿਕਾ, ਡੋਮੀਨੀਕਨ ਗਣਰਾਜ, ਇਕਵਾਡੋਰ, ਮਿਸਰ, ਏਲ ਸਾਲਵਾਡੋਰ, ਈਕਵੇਟੋਰੀਅਲ ਗਿਨੀ, ਇਰੀਤਰੀਆ, ਏਸਟੋਨੀਆ, ਇਥੋਪੀਆ, ਫਾਲਕਲੈਂਡ ਦੀਪ, ਫਾਰੋਇਲੈਂਡ, ਫਿਜੀ, ਫਿਨਲੈਂਡ, ਫਰਾਂਸ, ਫਰੈਂਚ ਪੋਲੀਨੇਸ਼ੀਆ, ਫਰੈਂਚ ਵੈਸਟ ਇੰਡੀਜ਼, ਗਬਾਨ, ਗਾਮਬੀਆ, ਜੋਰਜੀਆ, ਜਰਮਨੀ, ਘਾਨਾ, ਗੀਬਰਟਾਲ, ਗ੍ਰੀਸ, ਗਰੀਨਲੈਂਡ, ਗ੍ਰੇਨਾਡਾ, ਗੁਆਮ, ਗਵਾਟੇਮਾਲਾ, ਗਰਨਸੀ, ਗਿਨੀ, ਗਿਨੀ ਬਿਸਾਊ, ਗਾਇਨਾ, ਹਾਇਟੀ, ਹੰਡੁਰਾਸ, ਹਾਂਗ ਕਾਂਗ, ਹੰਗਰੀ, ਆਇਸਲੈਂਡ, ਇੰਡੀਆ,ਇੰਡੋਨੇਸ਼ੀਆ, ਇਰਾਨ, ਇਰਾਕ, ਆਈਰਲੈਂਡ, ਆਈਲ ਆਵ੍ ਮੈਨ, ਇਜ਼ਰਾਈਲ, ਇਟਲੀ, ਜਮਾਇਕਾ, ਜਪਾਨ, ਜਰਸੀ, ਜਾਰਡਨ, ਕਜ਼ਾਖਸਤਾਨ, ਕੀਨੀਆ, ਕਿਰੀਬਾਤੀ, ਕੋਸੋਵੋ, ਕੁਵੈਤ, ਕਿਰਗਿਜ਼ਸਤਾਨ, ਲਾਓਸ, ਲਾਤਵੀਆ, ਲੀਬਨਾਨ, ਲੈਸੋਥੋ, ਲਿਬੇਰੀਆ, ਲਿਬਿਆ, ਲਿਖਟੈਨਸਟੀਨ, ਲਿਥੁਆਨੀਆ, ਲਕਸੰਬਰਗ, ਮਕਾਓ, ਮੈਕਸੀਕੋ, ਮਿਕਰੋਨੇਸ਼ੀਆ, ਮੋਲਦੋਵਾ, ਮੋਨੇਕੋ, ਮੰਗੋਲੀਆ, ਮੋਂਟੇਨੇਗ੍ਰੋ, ਮੌਂਟੇਸਰਾਟ, ਮੋਰੋਕੋ, ਮੋਜ਼ਾਂਬੀਕ, ਮਿਆਂਮਾਰ, ਨਾਮੀਬੀਆ, ਨਾਉਰੂਨੇਪਾਲ, ਨੇਦਰਲੈਂਡ, ਨੇਦਰਲੈਂਡ ਐਂਟਿਲਸ, ਨਿਊ ਕੈਲਡੋਨੀਆ, ਨਿਊਜ਼ੀਲੈਂਡ, ਨਿਕਾਰਾਗੁਆ, ਨਾਇਜ਼ਰ, ਨਾਇਜੀਰੀਆ, ਉੱਤਰੀ ਕੋਰੀਆ, ਨਾਰਵੇ, ਓਮਾਨ, ਪਾਕਿਸਤਾਨ, ਪਾਲਾਉ, ਫਿਲਿਸਤੀਨ, ਪੈਨਾਮਾ, ਪੇਪੁਆ ਨਿਊ ਗਿਨੀ, ਪਾਰਾਗਵੇ, ਪੇਰੂ, ਫਿਲੀਪੀਨਜ਼, ਪੋਲੈਂਡ, ਪੋਰਤੁਗਾਲ, ਪੁਰਤੋ ਰੀਕੋ, ਕਤਰ, ਰੀਯੂਨੀਅਨ, ਰੋਮਾਨੀਆ, ਰੂਸ, ਰਵੰਡਾ, ਸੇਂਟ ਪੀਅਰ ਐਂਡ ਮਿਕੇਲਾਨ, ਸਾਮੋਆ, ਸਾਨ ਮਾਰੀਨੋ, ਸਾਓ ਤੋਮੇ ਅਤੇ ਪ੍ਰਿੰਸੀਪੇ, ਸਾਊਦੀ ਅਰਬ, ਸੇਨੇਗਲ, ਸਰਬੀਆ, ਸੇਸ਼ਲਸ, ਸਿਏਰਾ ਲਿਓਨ, ਸਿੰਗਾਪੁਰ, ਸਲੋਵੇਕੀਆ, ਸਲੋਵੇਨੀਆ, ਸੋਲੋਮਨ ਦੀਪ, ਸੋਮਾਲਿਆ, ਦੱਖਣੀ ਅਫ਼ਰੀਕਾ, ਦੱਖਣੀ ਕੋਰੀਆ, ਦੱਖਣੀ ਸੁਦਾਨ,ਸਪੇਨ, ਸ਼੍ਰੀ ਲੰਕਾ, ਐਸ ਕਿਟਸ ਐਂਡ ਨੇਵਿਸ, ਐਸ ਲੂਸਿਆ, ਐਸ ਵਿੰਸੈਂਟ, ਸੁਦਾਨ, ਸੁਰੀਨਾਮ, ਸਵਾਜੀਲੈਂਡ, ਸਵੀਡਨ, ਸਵਿਟਜ਼ਰਲੈਂਡ, ਸੀਰੀਆ, ਤਾਈਵਾਨ, ਤਾਜਿਕਿਸਤਾਨ, ਤਾਨਜਾਨੀਆ, ਥਾਈਲੈਂਡ, ਟਿਮੋਰ ਲੈਸਟੇ, ਟੋਗੋ, ਟੋਂਗਾ, ਟਰਿਨੀਡਾਡ ਐਂਡ ਟੋਬੈਗੋ, ਤੁਨੀਸੀਆ, ਤੁਰਕੀ, ਤੁਰਕਮੈਨਿਸਤਾਨ, ਟਰਕਸ ਐਂਡ ਕੇਕੋਸ, ਟੁਵਾਲੂ, ਉਗਾਂਡਾ, ਯੂਕਰੇਨ, ਯੂਨਾਈਟਡ ਅਰਬ ਅਮੀਰਾਤ, ਯੂਨਾਈਟਡ ਕਿੰਗਡਮ, ਯੂਨਾਈਟਡ ਸਟੇਟਸ ਆਵ੍ ਅਮੇਰੀਕਾ, ਉਰੂਗਵੇ, ਉਜ਼ਬੇਕਿਸਤਾਨ, ਵਾਨੂਆਟੂ, ਵਟਿਕਾਨ ਸਿਟੀ, ਵੇਨੇਜੁਏਲਾ, ਵੀਅਤਨਾਮ, ਵਰਜਿਨ ਆਇਲੈਂਡਸ (US), ਯੇਮਨ, ਜ਼ਾਂਬੀਆ, ਜ਼ਿੰਬਾਬਵੇ;

ਤੀਜਾ ਕਦਮ - ਐੱਸਐੱਸ ਐੱਸ ਐੱਚ ਕੂਲ ਜੋੜੋ:

ਕੰਟੇਨਰ ਨੂੰ ‘ਰਿਲੇਟਿਵ’ ਪੋਜ਼ੀਸ਼ਨ ਦੇਣਾ ਹੋਵੇਗਾ。

* { ਬਾਕਸ-ਇੰਸੂਲੇਸ਼ਨ: border-box; }
body {
  ਫੋਂਟ: 16px Arial;
}
.autocomplete {
  /* ਕੰਟੇਨਰ ਨੂੰ ਰਿਲੇਟਿਵ ਪੋਜ਼ੀਸ਼ਨ ਦੇਣਾ ਹੋਵੇਗਾ: */
  ਪੋਜ਼ੀਸ਼ਨ: relative;
  ਡਿਸਪਲੇਸ: inline-block;
}
input {
  ਬੋਰਡਰ: 1px solid transparent;
  ਬੈਕਗਰਾਊਂਡ-ਕਲਰ: #f1f1f1;
  padding: 10px;
  ਫੋਂਟ-ਸਾਈਜ਼: 16px;
}
input[type=text] {
  ਬੈਕਗਰਾਊਂਡ-ਕਲਰ: #f1f1f1;
  ਵਿਆਸ: 100%;
}
input[type=submit] {
  ਬੈਕਗਰਾਊਂਡ-ਕਲਰ: DodgerBlue;
  ਕਲਰ: #fff;
}
.autocomplete-items {
  ਪੋਜ਼ੀਸ਼ਨ: absolute;
  ਬੋਰਡਰ: 1px solid #d4d4d4;
  ਬੋਰਡਰ-ਬੋਟਮ: none;
  ਬੋਰਡਰ-ਟੋਪ: none;
  ਜ਼-ਇੰਡੈਕਸ: 99;
  /* ਆਟੋਮੈਟਿਕ ਪੂਰਾ ਕਰਨ ਵਾਲਾ ਆਈਟਮ ਨੂੰ ਕੰਟੇਨਰ ਦੇ ਨਾਲ ਸਮਾਨ ਚੌਦਾਈ ਵਿੱਚ ਸਥਿਤ ਕਰੋ: */
  ਟੋਪ: 100%;
  ਲੈਫਟ: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /* ਜਦੋਂ ਮਾਉਸ ਪਰ ਅਣਗਣਤਾ ਉੱਤੇ ਸਟੋਕ ਹੈ: */
  background-color: #e9e9e9;
}
.autocomplete-active {
  /* ਜਦੋਂ ਆਰਕੇ ਦੇ ਅੰਦਰ ਬਰਾਉਂਡ ਬਰਨਰ ਨਾਲ ਗਾਈਡ ਕਰਨਾ ਹੈ: */
  background-color: DodgerBlue !important;
  color: #ffffff;
}

ਚੌਥਾ ਪੜਾਅ - ਜਾਵਾਸਕ੍ਰਿਪਟ ਜੋੜੋ:

function autocomplete(inp, arr) {
  /* ਅਣਗਣਤਾ ਫੰਕਸ਼ਨ ਨੂੰ ਦੋ ਪੈਰਾਮੀਟਰ ਚਾਹੀਦੇ ਹਨ, ਇੱਕ ਟੈਕਸਟ ਫੀਲਡ ਅਣਗਣਤਾ ਅਤੇ ਇੱਕ ਅਣਗਣਤਾ ਹੋਣ ਵਾਲੇ ਮੁੱਲਾਂ ਦਾ ਆਰਰੇ: */
  var currentFocus;
  /* ਜਦੋਂ ਕੋਈ ਲਿਖਦਾ ਹੈ ਤਾਂ ਚਲਾਉਣ ਵਾਲਾ ਫੰਕਸ਼ਨ: */
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /* ਕੋਈ ਵੀ ਖੁੱਲ੍ਹੀ ਹੋਈ ਅਣਗਣਤਾ ਮੁੱਲ ਸੂਚੀ ਬੰਦ ਕਰੋ */
      closeAllLists();
      if (!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);
      /* ਆਰਰੇ ਵਿੱਚ ਹਰ ਪ੍ਰੋਜੈਕਟ ਦੇ ਅੰਦਰ ਲਾਉਣਾ... */
      for (i = 0; i < arr.length; i++) {
        /* ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਟੈਕਸਟ ਫੀਲਡ ਦੇ ਮੁੱਲ ਨਾਲ ਮੇਲ ਖਾਣ ਵਾਲੇ ਅੱਖਰਾਂ ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਜਾਂਦਾ ਹੈ: */
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /* ہر مناسبت کیلئے ایک ڈیویژن علامت بنائیجئے: */
          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] + "'>";
          /* جب کوئی لوگ پروجیکٹ کی وجہ کا دباؤ ڈالتا ہو، تو ایک فنکشن چلائیجئے: */
              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) {
        /* اگر پینچ بٹن پرس کیا جائے، فرم کا پیش کرنا روک دیجئے: */
        e.preventDefault();
        if (currentFocus > -1) {
          /* ਅਤੇ "active" ਆਈਟਮ 'ਤੇ ਕਲਿੱਕ ਕਰੋ:*/
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /* ਆਈਟਮਾਂ ਨੂੰ "active" ਵਜੋਂ ਵਰਗੀਕ੍ਰਿਤ ਕਰਨ ਵਾਲਾ ਫੰਕਸ਼ਨ:*/
    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);

亲自试一试