ออโตคอมพลีตใน JavaScript

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

หากต้องการ คุณสามารถคลิกเมาส์ที่ประเทศใดก็ได้ และชื่อประเทศจะปรากฏในช่องอินพุตโดยไม่ต้องพิมพ์ชื่อทั้งหมด นี่คือจุดประสงค์หลักของออโตคอมพลีต ในตัวอย่างนี้เพื่อความง่าย ฉันได้ใส่เพียงสามประเทศ: Belarus, Belgium และ Bulgaria โปรดพิมพ์ในช่องอินพุตด้านล่างนี้ เริ่มจากตัวอักษร 'B' (ภาษาอังกฤษ) แล้วตามด้วย 'e' และดูผลลัพธ์:

การอภิปราย

มาพูดคุยเกี่ยวกับวิธีการแก้ปัญหา ต้อง สร้างอาร์เรย์ที่มีชื่อประเทศ สำหรับฉัน มันเป็นแบบนี้:

let arr = ['Belarus', 'Belgium', 'Bulgaria'];

เมื่อพิมพ์ข้อความในช่องอินพุต ทุกครั้งที่พิมพ์ อักขระแต่ละตัว ต้องวนลูปอาร์เรย์ของประเทศและดึง ประเทศที่ขึ้นต้นด้วยข้อความที่พิมพ์ วิธีนี้ทำได้สะดวกด้วยเมธอด filter และ startsWith

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

เพื่อความสะดวกของคุณ ฉันนำโค้ด HTML และ CSS ที่พร้อมแล้วมาให้:

<div id="parent">
	<input id="elem">
	<ul id="list"></ul>
</div>
text text text text text

#parent {
	position: relative;
}
#elem {
	padding: 5px;
	font-size: 18px;
}

#parent ul {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: white;
}
#parent li {
	border: 1px solid gray;
	font-size: 18px;
	padding: 5px;
}
#parent li:hover {
	border: 1px solid black;
	cursor: pointer;
}

คัดลอกโค้ด HTML และ CSS ที่ให้ไว้ ใช้งานออโตคอมพลีตตามอัลกอริทึมที่อธิบายไว้