datalist في HTML: اقترح قيمًا دون حصر الإدخال فيها

الخلاصة السريعة

اربط الاقتراحات بالحقل

اربط سمة list في الحقل بمعرّف datalist، وضع الاقتراحات في option. [1]

ضع HTML في صفحة محلية، ثم المقاطع اللاحقة داخل script بعده. عمّان وإربد اقتراحان، والكتابة في input. [1]

أضفنا required كي نختبر حالة فراغ الحقل لاحقًا. [3]

مرّر الشيفرة أفقيًا عند الحاجة.

<label for="city">المدينة</label>
<input id="city" type="text" list="cities" required>
<datalist id="cities">
  <option value="عمّان"></option>
  <option value="إربد"></option>
</datalist>

افحص الارتباط برمجيًا

اقرأ خاصية list لمعرفة القائمة المرتبطة، أو null عند غياب الارتباط الصحيح. [2]

تعيد field.list عنصر القائمة المرتبط بالحقل، لا نص قيمة السمة. لهذا نقرأ id من العنصر في السطر الأول، فنحصل على cities. [2]

غيّر السمة مؤقتًا إلى معرّف غير موجود، فتظهر null. ثم أعد الارتباط قبل متابعة الاختبار. الخاصية list للقراءة فقط؛ تعديل الارتباط هنا يجري عبر setAttribute. [2]

إذا ظهر null على غير المتوقع، راجع قيمة السمة ووجود datalist ذي المعرّف المطابق في الشجرة نفسها. لا تبدأ بتشخيص مظهر الاقتراحات قبل التأكد من هذا الربط. [2]

مرّر الشيفرة أفقيًا عند الحاجة.

const field = document.getElementById("city");
console.log(field.list.id); // cities
field.setAttribute("list", "missing");
console.log(field.list); // null
field.setAttribute("list", "cities");

جرّب مدينة خارج الاقتراحات

اختبر قيمة خارج الاقتراحات؛ غيابها من القائمة وحده لا يجعلها غير صالحة. [1]

مرّت العقبة في اختبار Edge على الحقل المعروض، رغم غيابها عن الخيارين؛ الاقتراحات ليست قيمًا إلزامية. [1]

تعيد checkValidity نتيجة منطقية تصف صلاحية القيمة وفق القيود. شغّل هذا المقطع بعد استعادة الارتباط، وراقب true في وحدة التحكم. [3]

مرّر الشيفرة أفقيًا عند الحاجة.

field.value = "العقبة";
console.log(field.checkValidity()); // true

افصل القيود عن الاقتراحات

استخدم checkValidity لفحص القيود؛ الحقل المطلوب الفارغ يفشل في المثال. [3]

افرغ الحقل ثم افحصه مجددًا. تظهر false لأن المثال يشترط قيمة؛ لا تعني النتيجة أن المستخدم اختار مدينة غير مدرجة. [3]

تفحص الطريقة القيود برمجيًا، وتطلق invalid عند الإخفاق، لكنها لا تعرض رسالة خطأ تلقائية بنفسها. لذا نراقب الناتج هنا في وحدة التحكم. [3]

الصورة توضيحية. يختلف عرض الاقتراحات ودعمها بين المتصفحات؛ اختبر واجهتك الفعلية. [1]

مرّر الشيفرة أفقيًا عند الحاجة.

field.value = "";
console.log(field.checkValidity()); // false