چگونه فرم خودکار ایجاد کنیم

آموزش نحوه ایجاد فرم خودکار.

ایجاد فرم خودکار

مرحله اول - اضافه کردن 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\",\"کاستاریکا، ساحل عاج، کرواسی، کوبا، کوراسائو، قبرس، جمهوری چک، دانمارک، جیبوتی، دومینیکا، جمهوری دومینیکن، اکوادور، مصر، السالوادور، گینه استوایی، اریتره، استونی، اتیوپی، جزایر فالکلند، جزایر فارو، فیجی، فنلاند، فرانسه، پولینزی فرانسوی، آنتیل فرانسوی، گابون، گامبیا، جرجیا، آلمان، غنا، جبل الطارق، یونان، گرینلند، گRENادا، گوآم، گواتمالا، گرسی، گینه، گینه بیسائو، گویان، هائیتی، هندوراس، هنگ کنگ، مجارستان، ایسلند، هندایندونزی،ایران،عراق،ایرلند،جزیره من،اسرائیل،ایتالیا،جامایکا،ژاپن،جرزی،اردن،قزاقستان،کنیا،کیریباتی،کوسوو،کویت،قرقیزستان،لائوس،لاتویا،لبنان،لسوتو،لیبریا،لیبی،لیchtenstein،لیتوانی،لوکزامبورگ،ماکائو،مقدونیه،ماداگاسکار،مالاوی،مالزی،مالدیو،مالی،مالت،جزایر مارشال،موریتانی،موریشیوس،مکزیک،ماوریسیوس،مولداوی،موناکو،مونگولیستان،مونته‌نگرو،مونتسرات،مراکش،موزامبیک،میانمار،نامیبیا،نائوروایران، هلند، هائی‌تایی، نیو کaledonia، نیوزیلند، نیکاراگوآ، نیجر، نیجریه، کره شمالی، نروژ، عمان، پاکستان، پالائو، فلسطین، پاناما، پاپوا گینه نو، پاراگوئه، پرو، فیلیپین، لهستان، پرتغال، پورتوریکو، قطر، رئونیون، رومانی، روسیه، رواندا، سنت پیتر و میکلون، ساموآ، سان مارینو، سائوتومه و پرنسیپ، عربستان سعودی، سنگال، صربستان، سیشل، سیرالئون، سنگاپور، اسلوواکی، اسلوونی، جزایر سلولان، سومالی، آفریقای جنوبی، کره جنوبی، سودان جنوبی،اسپانیا، سریلانکا، سنت کیتس و نویس، سنت لوسیا، سنت وینسنت، سودان، سورینام، سوازیلند، سوئد، سوئیس، سوریه، تایوان، تاجیکستان، تانزانیا، تایلند، تیمور ل-esteem، تogo، تونگا، تری니다 و توباگو، تونس، ترکیه، ترکمنستان، ترک و کایکوس، تووالو، اوگاندا، اوکراین، امارات متحده عربی، بریتانیای کبیر، ایالات متحده امریکا، اروگوئه، ازبکستان، وانهاتو، واتیکان، ونزوئلا، ویتنام، جزایر ویرجین (ایالات متحده)، یمن، زامبیا، زیمبابوه؛

مرحله سوم - اضافه کردن CSS:

قالب باید دارای قرارگیری "متمرکز" باشد.

* { box-sizing: border-box; }
body {
  فونت: 16px Arial;
}
.autocomplete {
  /* قالب باید به صورت متمرکز قرار گیرد: */
  position: relative;
  نمایش: 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 خط سخت #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();
        اگر (currentFocus > -1) {
          /* و کلیک شبیه‌سازی شده روی پروژه "فعال" انجام شود: */
          اگر (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /* تابعی برای دسته‌بندی پروژه‌ها به عنوان "فعال": */
    اگر (!x) return false;
    /* ابتدا حذف "active" از تمام موارد انجام شود: */
    removeActive(x);
    اگر (currentFocus >= x.length) currentFocus = 0;
    اگر (currentFocus < 0) currentFocus = (x.length - 1);
    /* اضافه کردن "autocomplete-active" به کلاس: */
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /* تابعی برای حذف "active" از تمام موارد خودکاملی: */
    برای (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /* بستن تمام لیست‌های خودکاملی مستند، به جز آن که به عنوان پارامتر ارسال شده است: */
    var x = document.getElementsByClassName("autocomplete-items");
    برای (var i = 0; i < x.length; i++) {
      اگر (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>

به طور مستقیم امتحان کنید