อินพุตที่ควบคุมด้วยรายการคำแนะนำ

คอมโพเนนต์เติมข้อความอัตโนมัติมีสองส่วนหลัก ได้แก่ ช่องป้อนข้อความแบบควบคุม และรายการคำแนะนำแบบเลื่อนลง ช่องป้อนอยู่ในลำดับปกติของเอกสาร ส่วนรายการแบบเลื่อนลงจัดตำแหน่งแบบสัมบูรณ์อยู่ใต้ช่องป้อนโดยตรง ทั้งสองส่วนทำงานร่วมกันเป็นวิดเจ็ตแบบโต้ตอบเดียว แม้จะเป็นองค์ประกอบ DOM แยกจากกัน

คุณต้องมีตัวแปรสถานะสี่ตัว ได้แก่ inputValue (สตริง — ข้อความที่พิมพ์), suggestions (อาร์เรย์ — รายการที่ตรงกันในปัจจุบัน), isOpen (ค่าบูลีน — รายการแบบเลื่อนลงจะแสดงอยู่หรือไม่) และ selectedIndex (ตัวเลข — คำแนะนำที่ถูกเน้นสำหรับการนำทางด้วยแป้นพิมพ์ โดยเริ่มต้นที่ -1 เมื่อยังไม่มีรายการใดถูกเลือก)

ทำให้ช่องป้อนอยู่ภายใต้การควบคุมอย่างสมบูรณ์: value={inputValue} และ onChange={e => setInputValue(e.target.value)} วิธีนี้ทำให้รีแอ็กต์ควบคุมข้อความที่แสดงอยู่ได้ทั้งหมด การกดแป้นพิมพ์แต่ละครั้งจะอัปเดตสถานะ ซึ่งทำให้แสดงผลใหม่ด้วยค่าใหม่ อย่าใช้ช่องป้อนที่ไม่ได้อยู่ภายใต้การควบคุมสำหรับการเติมข้อความอัตโนมัติ เพราะคุณจำเป็นต้องอ่านและกำหนดค่าด้วยโปรแกรม

เมื่อคำแนะนำมาจากอาร์เรย์ภายในเครื่อง ให้กรองทุกครั้งที่แสดงผลตาม 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 รายการคำแนะนำ isOpen และ selectedIndex ให้ใช้ช่องป้อนแบบควบคุม กรองคำแนะนำตามค่าที่ป้อน และจัดการการแสดงรายการแบบเลื่อนลงผ่าน isOpen จัดการกรณีที่การสูญเสียโฟกัสเกิดก่อนการคลิกด้วยการหน่วงเวลา หรือใช้ onMouseDown ร่วมกับ preventDefault รีเซ็ต selectedIndex ทุกครั้งที่ช่องป้อนเปลี่ยน