كيفية إنشاء خاصية إكمال النص

تعلم كيفية إنشاء خاصية إكمال النص.

إنشاء نموذج إكمال النص

الخطوة الأولى - إضافة 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:

مجموعة من جميع البلدان والمناطق في العالم:

البلدان = ["افغانستان","البانيا","الجزائر","اندورا","أنغولا","أنغوilla","أنتيغوا وبابوا نيو غينيا","أرجنتين","أرمينيا","أروبا","استراليا","النمسا","أذربيجان","الباهamas","البحرين","بنغلاديش","بربادوس","بيلاروس","بلجيكا","بنما","بنين","برمودا","بوتان","بوليفيا","البوسنة والهرسك","بوتسوانا","البرازيل","جزر العذراء البريطانية","بروني","بولندا","بوركينا فاسو","بوروندي","كمبوديا","الكاميرون","كندا","كابو فيردي","جزر كايمان","جمهورية أفريقيا الوسطى","تشاد","تشيلي","الصين","كولومبيا","كونغو","جزر كوك","كوستاريكا،كوت ديفوار،كرواتيا،كوبا،كوراساو،كύπρος،جمهورية التشيك،دانمارك،جيبوتي،دومينيكا،جمهورية الدومينيكان،إكوادور،مصر،السلفادور،غينيا الاستوائية،إريتريا،إستونيا،إثيوبيا،جزر الفالكلاند،جزر فارو،فiji،فنلندا،فرنسا،بولينيزيا الفرنسية،جزر الهند الغربية،غابون،غامبيا،جورجيا،ألمانيا،غانا،جبل طارق،اليونان،جرينلاند،غرينادا،غوا،غواتيمالا،جيرنسي،غينيا،غينيا-بيساو،غيانا،هايتي،هندوراس،هونغ كونغ،هونغاري،آيسلندا،الهند،الإندونيسية،إيران،العراق،إيرلندا،جزيرة مان،إسرائيل،إيطاليا،جمايكا،اليابان،جيرسي،الأردن،كازاخستان،كينيا،كيريباتي،كوسوفو،الكويت،قرغيزستان،لاوس،لاتفيا،لبنان،لسوتو،ليبريا،ليبيا،ليichtenstein،ليتوانيا،لوكسمبورغ،ماكاو،مقدونيا،مدغشقر،مالاوي،ماليزيا،جزر المالديف،مالي،ملتا،جزر مارشال،موريتانيا،موريشيوس،المكسيك،مايكرونيزيا،مولدوفا،موناكو،مونغوليا،مونتينيغرو،مونتسيرات،المغرب،موزامبيق،ميانمار،ناميبيا،ناورو،النيبال، هولندا، جزر الأنتيل الهولندية، كاليدونيا الجديدة، نيوزيلندا، نيكاراغوا، النيجر، نيجيريا، كوريا الشمالية، النرويج، عمان، باكستان، بابوا غينيا الجديدة، باراغواي، بيرو، الفلبين، بولندا، البرتغال، بورتوريكو، قطر، ريونيون، رومانيا، روسيا، رواندا، سانت بيرت والميكيلون، ساموا، سان مارينو، ساو تومي وبرينسيبي، السعودية، السنغال، صربيا، سيشيل، سيراليون، سنغافورة، سلوفاكيا، سلوفينيا، جزر سليمان، الصومال، جنوب أفريقيا، كوريا الجنوبية، جنوب السودان،إسبانيا،سريلانكا،ست كيتس ونيفيس،سانت لوسيا،سانت فينيس،السودان،سورينام،سوازيلاند،سويد،سويسرا،سوريا،تايوان،طاجيكستان،تانزانيا،تايلاند،تيمور ليشتي،توجو،تونغا،ترينيداد وتوباغو،تونس،تركيا،طاجيكستان،تركمانستان،جزر تركس والكايكوس،توفالو،أوغندا،أوكرانيا،إمارات عربية متحدة،المملكة المتحدة،ولايات المتحدة الأمريكية،أوروغواي،أوزبكستان،فانواتو،حاضرة الفاتيكان،فنزويلا،فيتنام،جزر الفيرجين (الولايات المتحدة)،اليمن،زامبيا،زيمبابوي;

الخطوة الثالثة - إضافة CSS: }}

يجب أن يكون الصندوق يحتوي على "الوضع النسبي".

* { box-sizing: border-box; }
الجسم {
  الخط: 16 بكسل Arial;
}
.autocomplete {
  /* يجب أن يكون الصندوق مطلقًا نسبيًا: */
  الوضع: نسبي;
  العرض: داخلي;
}
input {
  الحد: 1 بكسل شفاف;
  لون الخلفية: #f1f1f1;
  padding: 10px;
  حجم الخط: 16 بكسل;
}
input[type=text] {
  لون الخلفية: #f1f1f1;
  العرض: 100%;
}
input[type=submit] {
  لون الخلفية: DodgerBlue;
  اللون: #fff;
}
.autocomplete-items {
  الوضع: مطلق;
  الحد: 1 بكسل ثابت #d4d4d4;
  الحد السفلي: لا شيء;
  الحد الأعلى: لا شيء;
  الترتيب الأفقى: 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;
}

الخطوة الرابعة - إضافة JavaScript:

function autocomplete(inp, arr) {
  /* تحتاج دالة التكامل التلقائي إلى اثنين من المعلمات، الأولى هي عنصر حقل النص، والثانية هي مجموعة القيم التي يمكن تكاملها تلقائيًا: */
  تعريف currentFocus;
  /* تنفيذ الدالة عند كتابة شخص ما في حقل النص: */
  inp.addEventListener("input", function(e) {
      تعريف 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] + "'>";
          /* يتم تنفيذ وظيفة عند ضغط أي مفتاح على مفتاح السهم: */
              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;
    /* إزالة "الصفة النشطة" من جميع البنود أولاً */
    removeActive(x);
    إذا (currentFocus >= x.length) currentFocus = 0;
    إذا (currentFocus < 0) currentFocus = (x.length - 1);
    /* إضافة "الصفة النشطة" إلى البند */
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /* دالة لإزالة "الصفة النشطة" من جميع بنود التحقق */
    لـ (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);
});
}

الخطوة الخامسة - تفعيل خاصية "autocomplete" في "myInput":

يضع مجموعة البلدان كـ autocomplete النوع الثاني من المعامل

<script>
autocomplete(document.getElementById("myInput"), countries);
</script>

تجربة شخصية