วิธีสร้างดาต้าลิสต์ที่สามารถค้นหาได้ทันที

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

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

เราสามารถทำให้ฟิลด์อินพุตใช้งานได้มากขึ้นถ้าเราเปิดใช้งานผู้ใช้ เข้าถึงรายการตัวเลือกทั้งหมด ตลอดเวลาระหว่างกระบวนการรับอินพุต.

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

2. กำหนดให้ Datalist มองเห็นได้

โดยค่าเริ่มต้น องค์ประกอบ HTML คือ ซ่อนเร้น. เราเห็นได้ก็ต่อเมื่อเรา เริ่มพิมพ์อินพุต ลงในฟิลด์ที่ datalist เชื่อมต่ออยู่.

อย่างไรก็ตามมีวิธี "บังคับ" เนื้อหาของนักข้อมูล (เช่นตัวเลือกทั้งหมด) เพื่อให้ปรากฏบนหน้าเว็บ. เราจะต้องให้มันที่เหมาะสมเท่านั้น แสดง มูลค่าทรัพย์สิน นอกเหนือจากนี้ ไม่มี, เช่น จอแสดงผล: บล็อก;.

 datalist display: block;

ตัวเลือกที่ปรากฏ ยังไม่สามารถเลือกได้ ณ จุดนี้เบราว์เซอร์เท่านั้น วาทกรรมตัวเลือก พบภายในดาต้าลิสต์.

ดังกล่าวข้างต้นเนื่องจากพฤติกรรมในตัวของ ธาตุ, ส่วนหนึ่งของตัวเลือกปรากฏขึ้นและสามารถเลือกได้, แต่เมื่อผู้ใช้เริ่มพิมพ์สตริงที่เบราว์เซอร์สามารถทำได้ ค้นหาตัวเลือกการจับคู่.

เรายังต้องหากลไกในการทำ ทั้งหมด ตัวเลือก (บนภาพหน้าจอด้านบนแสดงภายใต้รายการข้อมูลแบบเลื่อนลง) เลือก ที่ จุดอื่น ๆ ของกระบวนการรับอินพุต - เมื่อผู้ใช้ต้องการที่จะตรวจสอบตัวเลือกก่อนที่พวกเขาจะพิมพ์อะไรหรือในขณะที่พวกเขาได้นำบางสิ่งบางอย่างลงในช่องใส่.

3. นำเข้ามา องค์ประกอบ HTML.

เราจะเลือกวิธีที่สองเนื่องจากง่ายกว่าและได้รับอนุญาตให้ใช้ เป็นกลไกทางเลือก ในเบราว์เซอร์ที่ไม่รองรับ ธาตุ. เมื่อเบราว์เซอร์ไม่สามารถแสดงผล & แสดงรายการข้อมูลได้ วาทกรรม แท็ก HTML โค้ดมีลักษณะดังนี้:

Datalist รวมกับ กำลังเพิ่ม หลายอย่าง คุณลักษณะของ แท็กดังนั้นเมื่อผู้ใช้เลือกตัวเลือกจากรายการแบบเลื่อนลงค่าของมันจะปรากฏภายใน สนามเช่นกัน. / * เมื่อผู้ใช้เลือกตัวเลือกจาก DDL เขียนมันลงในฟิลด์ข้อความ * / select.addEventListener ('เปลี่ยน', fill_input); ฟังก์ชัน fill_input () input.value = options [this.selectedIndex] .value; hide_select (); ข้อเสีย ข้อเสียเปรียบหลักของเทคนิคนี้คือ ขาดวิธีการตรงไปตรงมาสไตล์ ธาตุ ด้วย CSS (รูปลักษณ์ของ และ