การนำทางด้วยแป้นพิมพ์ในรายการคำแนะนำ

ผูกตัวจัดการแป้นพิมพ์กับเหตุการณ์ onKeyDown ขององค์ประกอบช่องป้อน ไม่ใช่ onKeyPress (เลิกใช้งานแล้ว) หรือ onKeyUp keyDown ทำงานก่อนที่อักขระจะปรากฏในช่องป้อน จึงเปิดโอกาสให้คุณดักจับ ArrowDown, ArrowUp, Enter และ Escape ก่อนที่ปุ่มเหล่านี้จะมีผลตามค่าเริ่มต้นของเบราว์เซอร์

เมื่อผู้ใช้กด ArrowDown ให้เพิ่มค่า selectedIndex ขึ้น 1 โดยจำกัดค่าสูงสุดไว้ที่ suggestions.length - 1: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)) และเรียก e.preventDefault() เพื่อป้องกันไม่ให้เคอร์เซอร์เลื่อนไปท้ายข้อความในช่องป้อน ซึ่งเป็นพฤติกรรมเริ่มต้นของเบราว์เซอร์สำหรับ ArrowDown ในช่องป้อนข้อความ

เมื่อผู้ใช้กด ArrowUp ให้ลดค่า selectedIndex ลง 1 โดยจำกัดค่าต่ำสุดไว้ที่ 0: setSelectedIndex(prev => Math.max(prev - 1, 0)) คุณอาจเลือกจำกัดค่าไว้ที่ -1 (ไม่มีการเลือก) เมื่อเลื่อนขึ้นเหนือดัชนี 0 เพื่อให้ผู้ใช้ “ยกเลิกการเลือก” และกลับไปพิมพ์ได้อย่างอิสระ

เมื่อกด Enter และ selectedIndex >= 0 ให้เลือกคำแนะนำที่ถูกเน้น โดยกำหนด inputValue เป็น suggestions[selectedIndex] ปิดรายการแบบเลื่อนลง และรีเซ็ต selectedIndex เป็น -1 หากไม่มีคำแนะนำถูกเน้น (selectedIndex เป็น -1) ให้การส่งแบบฟอร์มหรือการค้นหาตามปกติดำเนินต่อไป

เมื่อกด Escape ให้ปิดรายการแบบเลื่อนลงโดยกำหนด isOpen เป็น false และรีเซ็ต selectedIndex เป็น -1 อย่าล้างค่าช่องป้อน เพราะผู้ใช้เพียงต้องการปิดคำแนะนำโดยไม่เลือกคำแนะนำใด และต้องการเก็บข้อความที่พิมพ์ไว้เพื่อแก้ไขต่อ

เมื่อกด Tab ให้ปิดรายการแบบเลื่อนลง เพราะเบราว์เซอร์จะย้ายโฟกัสไปยังองค์ประกอบถัดไปที่รับโฟกัสได้อยู่แล้ว การกำหนด isOpen เป็น false เมื่อกด Tab ช่วยให้รายการแบบเลื่อนลงไม่ค้างอยู่หลังจากโฟกัสออกจากช่องป้อน คุณไม่จำเป็นต้องเรียก preventDefault() ปล่อยให้เบราว์เซอร์จัดการลำดับแท็บตามธรรมชาติ

คำแนะนำที่ถูกเน้นต้องแตกต่างจากรายการอื่นอย่างเห็นได้ชัด ให้ใช้รูปแบบที่ใช้งานอยู่กับคำแนะนำที่ตำแหน่ง selectedIndex: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'} สถานะที่ใช้งานอยู่มักใช้การเปลี่ยนสีพื้นหลัง เพื่อให้เห็นได้ชัดว่ารายการใดจะถูกเลือกเมื่อกด Enter

เมื่อรายการคำแนะนำมีความสูงสูงสุดและสามารถเลื่อนได้ รายการที่ถูกเน้นอาจเลื่อนออกนอกหน้าจอระหว่างการนำทางด้วยแป้นพิมพ์ ให้ใช้อาร์เรย์รีฟเพื่อเก็บองค์ประกอบ DOM ของคำแนะนำ และเรียก listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }) ทุกครั้งที่ selectedIndex เปลี่ยน ค่า nearest ของบล็อกจะช่วยลดระยะทางที่ต้องเลื่อน

เมื่อช่องป้อนเปลี่ยนและมีรายการใหม่ที่ผ่านการกรองปรากฏขึ้น ให้รีเซ็ต selectedIndex เป็น -1 ในการอัปเดตสถานะเดียวกัน หรือใน useEffect ที่ขึ้นอยู่กับรายการคำแนะนำ ดัชนีเก่าที่ชี้ไปยังรายการซึ่งถูกลบออกอาจทำให้ผู้ใช้เลือกคำแนะนำผิดรายการ

ลำดับการใช้งานทั้งหมดมีดังนี้ ผู้ใช้พิมพ์เพื่อกรอง, ArrowDown เน้นรายการแรก, กด ArrowDown เพิ่มเพื่อเลื่อนผ่านรายการ, ArrowUp เลื่อนกลับขึ้นไป, Enter เลือกรายการที่ถูกเน้น และ Escape ปิดโดยไม่เลือก ลำดับนี้ครอบคลุมรูปแบบการโต้ตอบด้วยแป้นพิมพ์มาตรฐานทั้งหมดที่ผู้ใช้คาดหวังจากช่องเติมข้อความอัตโนมัติ

ให้เรียก e.preventDefault() เสมอเมื่อจัดการ ArrowDown และ ArrowUp ภายในช่องป้อนข้อความ หากไม่ทำเช่นนั้น ArrowDown จะเลื่อนเคอร์เซอร์ข้อความไปท้ายข้อความ และ ArrowUp จะเลื่อนไปต้นข้อความ การเลื่อนเคอร์เซอร์เหล่านี้จะขัดแย้งกับการนำทางด้วยดัชนีการเลือก และทำให้เกิดพฤติกรรมที่สับสน

เมื่อผู้ใช้กด Enter โดยมีคำแนะนำถูกเน้นที่ selectedIndex = 2 ควรเกิดอะไรขึ้น

จัดการ onKeyDown บนช่องป้อนข้อมูล เมื่อกด ArrowDown ให้เพิ่มค่า selectedIndex โดยจำกัดไว้ไม่ให้เกินค่าสูงสุด เมื่อกด ArrowUp ให้ลดค่าโดยจำกัดไว้ที่ 0 หรือ -1 ปุ่ม Enter ใช้เลือกรายการที่ไฮไลต์ ปุ่ม Escape ปิดโดยไม่เลือกรายการ และปุ่ม Tab ปิดแล้วปล่อยให้เบราว์เซอร์ย้ายโฟกัส โปรดเรียก preventDefault กับปุ่มลูกศรทุกครั้ง และเลื่อนรายการที่ไฮไลต์ให้เข้ามาอยู่ในมุมมองเสมอ