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

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

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

مرحله اول - اضافه کردن 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","کاستا ریکا، سیٹ د آئیویر، کرواسی، کوبا، کوراسائو، قبرس، جمهوری چک، دانمارک، جیبوتی، دومینیکا، جمهوری دومنیکن، اکوادور، مصر، السالوادر، گینه اقیانوسی، اریتریا، استونی، اتیوپی، جزایر فالکن، جزایر فارو، فیجی، فنلاند، فرانسه، فرانسه اقیانوسی، فرانسه شرقی، گابون، گامبیا، جرجیا، آلمان، گانا، جبل الطارق، یونان، گرینلند، گرنادا، گوام، گواتمالا، گرنسی، گینه، گینه بیسائو، گویان، هائیتی، هندوراس، ہنگری، آئسلینڈ، بھارت،بنگلادیش،ایران،عراق،آئرلند،جزیره من،اسرائیل،ایتالیا،جمائیکا،ژاپن،جرزی،اردن،قزاقستان،کنیا،کیریباتی،کوسوو،کویت،قرقیزستان،لائوس،لاتویا،لبنان،لسوتو،لیبریا،لیبی،لیchtenstein،لیتوانیا،لوکزامبورگ،ماکائو،مقدونیه،ماداگاسکار،مالاوی،مالزی،مالدیو،مالی،مالت،جزایر مارشال،موریتانی،موریشیوس،مکزیک،ماکرونزیا،مولداوی،موناکو،مونگولیا،مونتنگرو،مونتسرات،مراکش،موزامبیک، میانمار،نامیبیا،نائورو،نپال، هلند، هلند آنتیل، نیوcaledonia، نیوزیلند، نکاراگوآ، نیجر، نیجریه، کره شمالی، نروژ، عمان، پاکستان، پالائو، فلسطین، پاناما، پاپوا گینه نو، پاراگوئه، پرو، فیلیپین، لهستان، پرتغال، پورتوریکو، قطر، رئونیون، رومانی، روسیه، رواندا، سنت پیئر و میکلون، ساموآ، سان مارینو، سائوتومه و پرنسیپ، عربستان سعودی، سنگال، صربستان، سیشل، سیرالئون، سنگاپور، اسلوواکی، اسلوونی، جزایر سلولان، سومالی، آفریقای جنوبی، کره جنوبی، سودان جنوبی،اسپین، سری لنکا، سنت کیتس و نویس، سنت لوسیا، سنت وینسنت، سودان، سورینام، سوازیلند، سوئد، سوئیس، سوریه، تایوان، تاجیکستان، تانزانیا، تایلند، تیمور ل است، تگو، تونگا، تریinidad و Tobago، تونس، ترکیه، ترکمنستان، ترک و کایکوس، تووالو، اوگاندا، اوکراین، امارات متحده عربی، انگلستان، ایالات متحده آمریکا، اروگوئه، ازبکستان، وانیواتو، واتیکان، ونزوئلا، ویتنام، جزایر ویرجین (US)، یمن، زامبیا، زیمبابوه;

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

قاب باید دارای پوزیشن ‘رلئیتیو’ باشد.

* { بکس-اینگ سینگل بکس: بوردر-بک سینگل بکس; }
بدی:
  فونت: 16 پیکسلس Arial;
}
.autocomplete {
  /* قاب باید رلئیتیو قرار گیرد: */
  پوزیشن: رلئیتیو;
  نمایش: اینلاین بلوک;
}
input {
  بوردر: 1 پیکسلس سولید شفاف;
  رنگ پس‌زمینه: #f1f1f1;
  پیدائی: 10 پونکٹ;
  اندازه فونت: 16 پیکسلس;
}
input[type=text] {
  رنگ پس‌زمینه: #f1f1f1;
  کور: 100%;
}
input[type=submit] {
  رنگ پس‌زمینه: DodgerBlue;
  رنگ: #fff;
}
.autocomplete-items {
  پوزیشن: ابستریو;
  بوردر: 1 پیکسلس سولید #d4d4d4;
  بوردر-بوتم: هیچ؛
  بوردر-تاپ: هیچ؛
  ز-ایندکس: 99;
  /* کامیاب طور خودکار کتار کامل قرار دادن کتار کامیاب طور با قاب کتار مشابه: */
  بوتم: 100%;
  بائط: 0;
  دائیں: 0;
}
.autocomplete-items div {
  پیدائی: 10 پونکٹ;
  cursor: pointer;
  پس منظر رنگ: #fff;
  کمینا 1 پونکٹ سولڈ #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);
      /* آرائی کا ہر پروجیکٹ کا حوالہ بھرنا... */
      برای (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) {
          /* "active" جملے پر کلک کرنا کا فنکشن: */
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /* جملوں کو "activity" بنانے کا فنکشن: */
    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) {
    /* تمام خودکار جملات سے "autocomplete-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);

亲自试一试