إدخال متحكَّم به مع قائمة اقتراحات

يتكوّن مكوّن الإكمال التلقائي من جزأين أساسيين: حقل إدخال نصي مُدار وقائمة منسدلة باقتراحات. يوجد حقل الإدخال ضمن التدفق الطبيعي للمستند، بينما تُوضَع القائمة المنسدلة بموضع مطلق أسفله مباشرةً. ويعملان معًا كعنصر تفاعلي واحد، رغم أنهما عنصران منفصلان في DOM.

تحتاجون إلى أربعة متغيرات للحالة: inputValue (سلسلة نصية — ما تمّت كتابته)، وsuggestions (مصفوفة — العناصر المطابقة الحالية)، وisOpen (قيمة منطقية — ما إذا كانت القائمة المنسدلة مرئية)، وselectedIndex (عدد — الاقتراح المميّز للتنقل باستخدام لوحة المفاتيح، ويبدأ بالقيمة -1 عند عدم تحديد أي اقتراح).

اجعلوا حقل الإدخال مُدارًا بالكامل: value={inputValue} وonChange={e => setInputValue(e.target.value)}. يمنح هذا React تحكمًا كاملًا في النص المعروض. يحدّث كل ضغط على مفتاح الحالة، مما يؤدي إلى إعادة التصيير بالقيمة الجديدة. لا تستخدموا مطلقًا حقل إدخال غير مُدار للإكمال التلقائي، إذ تحتاجون إلى قراءة القيمة وتعيينها برمجيًا.

عندما تأتي الاقتراحات من مصفوفة محلية، صفّوا العناصر في كل عملية تصيير استنادًا إلى inputValue: قارنوا كل عنصر باستخدام item.toLowerCase().includes(inputValue.toLowerCase()). يمكنكم حساب ذلك باستخدام useMemo إذا كانت القائمة كبيرة لتجنّب إعادة الحساب في كل إعادة تصيير. أما القوائم الصغيرة، فتكفي تصفيتها مباشرةً.

افتحوا القائمة المنسدلة عندما يكون inputValue.length > 0 وsuggestions.length > 0. أغلِقوها عند فقدان حقل الإدخال التركيز، مع تأخير قصير للسماح أولًا بتسجيل النقرات على الاقتراحات، أو عند اختيار اقتراح، أو عند الضغط على مفتاح Escape. اضبطوا isOpen وفقًا لذلك للتحكم في التصيير الشرطي.

يُطلَق الحدث onBlur عندما يفقد حقل الإدخال التركيز، ويحدث ذلك عندما ينقر المستخدم على اقتراح. إذا أغلقتم القائمة المنسدلة فورًا عند فقدان التركيز، فلن تُسجّل النقرة على الاقتراح، لأن القائمة ستختفي قبل إطلاق حدث النقر. استخدموا setTimeout(() => setIsOpen(false), 150) لمنح النقرة وقتًا كي تُسجّل.

ضعوا القائمة المنسدلة باستخدام position: absolute حتى تتراكب فوق المحتوى الموجود أسفل حقل الإدخال بدلًا من دفعه إلى الأسفل. اضبطوا قيمة z-index مرتفعة (100 أو أكثر) لتظهر فوق المحتوى الآخر. واضبطوا max-height مع overflow-y: auto لمنع القائمة من أن تصبح طويلة جدًا عند وجود نتائج كثيرة.

ينبغي أن يمتلك كل عنصر اقتراح معالج onClick: onClick={() => { setInputValue(suggestion); setIsOpen(false); }}. يعيّن هذا حقل الإدخال إلى الاقتراح المحدد ويغلق القائمة المنسدلة. ويبدو التحديد فوريًا وطبيعيًا، بما يطابق السلوك المتوقع من حقول الإكمال التلقائي.

بديل مهلة فقدان التركيز هو استخدام onMouseDown={e => e.preventDefault()} على كل عنصر اقتراح. يمنع هذا حدث الضغط على زر الفأرة من سحب التركيز من حقل الإدخال، ولذلك لا يُطلَق حدث فقدان التركيز عند النقر على اقتراح. ويحتفظ حقل الإدخال بالتركيز، ثم يُنفّذ معالج النقر بصورة سليمة.

يجب أن يتيح الإكمال التلقائي الجيد التنقل باستخدام لوحة المفاتيح. ينبغي أن يتمكن المستخدم من الضغط على ArrowDown لتمييز الاقتراح الأول، ومواصلة الضغط للانتقال إلى أسفل القائمة، والضغط على Enter للتحديد، والضغط على Escape للإغلاق دون تحديد. يُنفّذ ذلك من خلال معالجة onKeyDown على عنصر حقل الإدخال.

كلما كتب المستخدم وتغيّرت قيمة inputValue، أعيدوا ضبط selectedIndex إلى -1. يمسح هذا أي تحديد سابق باستخدام لوحة المفاتيح، بحيث تبدأ مجموعة الاقتراحات المصفّاة الجديدة من دون تمييز أي عنصر. إن بقاء فهرس تحديد قديم يشير إلى عنصر مختلف بعد تغيّر القائمة أمر مربك وغير صحيح.

لماذا نستخدم onMouseDown مع e.preventDefault() على عناصر الاقتراح بدلًا من الاعتماد على مهلة فقدان التركيز؟

تحتاج أداة الإكمال التلقائي إلى أربعة متغيرات للحالة: inputValue وsuggestions وisOpen وselectedIndex. استخدموا حقل إدخال مُدارًا، وصفّوا الاقتراحات استنادًا إلى حقل الإدخال، وأديروا ظهور القائمة المنسدلة عبر isOpen. عالجوا حالة التنافس بين فقدان التركيز والنقر قبل حدوثه باستخدام مهلة أو باستخدام onMouseDown مع preventDefault. أعيدوا ضبط selectedIndex كلما تغيّر حقل الإدخال.