স্বয়ংক্রিয় পূরণ কিভাবে তৈরি করা যায়

স্বয়ংক্রিয় পূরণ ফিক্সন করতে শিখুন

স্বয়ংক্রিয় পূরণ ফর্ম তৈরি করুন

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<!-- নিশ্চিত করুন যে, ফর্মটি স্বয়ংক্রিয়ভাবে আটকা করা হয়নি: -->
<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>

দ্বিতীয় পদক্ষেপ - জেভাস্ক্রিপ্ট আইনক্রমিক তালিকা তৈরি করুন:

বিশ্বের সমস্ত দেশ/অঞ্চলকে যুক্ত করা হওয়া একটি আইনক্রমিক তালিকা:

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), ইয়েমেন, জাম্বিয়া, জিম্বাবুয়ে;

তৃতীয় পদক্ষেপ - সিএসএস যোগ করুন：

কনটেনারকে ‘সমসমান’ অবস্থানতা দিতে হবে。

* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /* কনটেনারকে সমসমান অবস্থানতা দিতে হবে: */
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 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;
  /* কনটেনারের সমসমান প্রস্থতা তৈরি করুন: */
  top: 100%;
  left: 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()) {
          /* প্রত্যেক মাথার অক্ষরসমূহের জন্য একটি 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) {
        /* যদি এন্টার কী চাপা হয়, তবে ফর্ম সমর্থন বন্ধ করা হবে: */
        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);

亲自试一试