ऑटोकमप्लीट कैसे बनाएं

ऑटोकमप्लीट फ़ंक्शन कैसे बनाएं सीखें।

ऑटोकमप्लीट फॉर्म बनाएं

पहला कदम - 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>

दूसरा कदम - जेस्क्रिप्ट एक्सेसबल बनाएं:

दुनिया के सभी देश/क्षेत्रों के लिए एक एक्सेसबल अर्रे:

वार देश = ["अफगानिस्तान","अल्बानिया","अल्जीरिया","एंडोरा","एंगोला","एंग्विला","एंटिगुआ एंड बारबुडा","अर्जेंटीना","आर्मेनिया","अरूबा","ऑस्ट्रेलिया","ऑस्ट्रिया","अजरबैजान","बाहामस","बहरीन","बांग्लादेश","बारबाडोस","बेलारूस","बेल्जियम","बेलिज","बेनिन","बर्मुडा","भूटान","बोलिविया","बोस्निया एंड हर्जेगोविना","बोत्सवाना","ब्राजील","ब्रिटिश वरिंग आइलैंड्स","ब्रुनेई","बुल्गारिया","बुर्किना फासो","बुरुंडी","कंबोडिया","कैमरून","कनाडा","कैप वर्डे","केमैन आइलैंड्स","सेंट्रल अफ्रीकन गणराज्य","चाद","चिली","चीन","कोलंबिया","कांगो","कुक आइलैंड्स",""}कोस्टा रिका, कोट डी आइवोइर, क्रोएशिया, क्यूबा, कुराकास, सीप्रस, चेक रिपब्लिक, डेनमार्क, जिबूती, डोमिनिका, डोमिनिकन रिपब्लिक, इक्वाडोर, मिस्र, एल साल्वाडोर, इक्वाटोरियल गिनी, एरित्रिया, एस्टोनिया, इथियोपिया, फाल्कलैंड द्वीप, फारो द्वीप, फिजी, फिनलैंड, फ्रांस, फ्रेंच पोलिनेशिया, फ्रेंच वेस्ट इंडीज, गाबोन, गाम्बिया, जॉर्जिया, जर्मनी, घाना, गिब्राल्टर, ग्रीस, ग्रीनलैंड, ग्रेनाडा, ग्वाम, गватेमाला, गर्नसी, गिनी, गिनी-बिसाउ, गुयाना, हैती, होन्डुरास, हांगकांग, हंगरी, आइसलैंड, भारत,इंडोनेशिया, ईरान, इराक, आयरलैंड, आइल ऑफ मैन, इस्रायल, इटली, जमैका, जापान, जर्सी, जॉर्डन, काजाखस्तान, केन्या, किरिबाती, कोसोवो, कुवैत, किर्गिज़स्तान, लाओस, लातविया, लेबनान, लेसोथो, लीबेरिया, लीबिया, लिचेनस्टीन, लिथुआनिया, लक्ज़मबर्ग, मकाउ, मैसेडोनिया, मादागास्कर, मालावी, मलेशिया, मालदीव, माली, माल्टा, मार्शल द्वीप, मौरिटानिया, मौरिशस, मैक्सिको, माइक्रोनेशिया, मोल्दोवा, मोनाको, मंगोलिया, मोंटेनेग्रो, मॉन्टसेराट, मोरक्को, मोजाम्बिक, म्यांमार, नामीबिया, नाउरूजिम्बाब्वे, नेपाल, नीदरलैण्ड, नीदरलैण्ड अंटिल्लीस, न्यू कैलेडोनिया, न्यूजीलैण्ड, निकारागुआ, नाइजर, नाइजीरिया, उत्तर कोरिया, नॉर्वे, ओमान, पाकिस्तान, पालाउ, फिलिस्तीन, पनामा, पापुआ न्यू गिनी, पाराग्वे, पेरू, फिलीपींस, पोलैंड, पुर्तगाल, पुर्टो रिको, कतर, रेयन, रोमानिया, रूस, रवांडा, सेंट पीयर एंड मिकेलॉन, सामोआ, सान मारिनो, साओ तोमे एंड प्रिंसिपी, सऊदी अरब, सेनेगल, सर्बिया, सेशेल्स, सिएरा लियोन, सिंगापुर, स्लोवाकिया, स्लोवेनिया, सोलोमन द्वीप, सोमालिया, दक्षिण अफ्रीका, दक्षिण कोरिया, दक्षिण सूदान,Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];

तीसरा कदम - CSS जोड़ें:

कंटेनर को 'आपसी' स्थानांतरण होना चाहिए。

* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /* कंटेनर को आपसी स्थानांतरण करना आवश्यक है: */
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  पैडिंग: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #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;
}

चौथा चरण - जावास्क्रिप्ट जोड़ें:

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);
      /* एरे आरे में हर वस्तु को चकार करें... */
      for (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] + "'>";
          /* जब कोई व्यक्ति प्रोजेक्ट के मूल्य पर क्लिक करता है, तो फ़ंक्शन कार्य करे: */
              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>

स्वयं प्रयोग करें