รูปแบบ HTML: Select-Option เทียบกับ Datalist-Option

ฉันสงสัยว่าความแตกต่างระหว่าง Select-Option และ Datalist-Option คืออะไร มีสถานการณ์ใดที่จะดีกว่าที่จะใช้อย่างใดอย่างหนึ่งหรือไม่? ตัวอย่างของแต่ละรายการดังต่อไปนี้:

เลือก - ตัวเลือก

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Datalist-Option

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

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

แก้ไข 1: คุณใช้อันไหนขึ้นอยู่กับความต้องการของคุณ หากผู้ใช้ต้องป้อนหนึ่งในตัวเลือกของคุณให้ใช้selectองค์ประกอบ หากการใช้งานสามารถป้อนอะไรก็ได้ให้ใช้datalistองค์ประกอบ

แก้ไข 2: พบความเป็นระเบียบเรียบร้อยนี้ในHTML Living Standard : "องค์ประกอบตัวเลือกแต่ละรายการที่สืบเนื่องมาจากองค์ประกอบดาต้าลิสต์ ... แสดงถึงข้อเสนอแนะ"

จากมุมมองทางเทคนิคต่างกันอย่างสิ้นเชิง <datalist>เป็นภาชนะที่เป็นนามธรรมของตัวเลือกสำหรับองค์ประกอบอื่น ๆ ในกรณีของคุณคุณเคยใช้<input type="text"แต่คุณยังสามารถใช้กับช่วงสีวันที่ ฯลฯhttp://demo.agektmr.com/datalist/

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

หากเรามุ่งเน้นไปที่การใช้<datalist>เป็นรายการตัวเลือกสำหรับช่องข้อความนี่คือความแตกต่างบางประการระหว่างสิ่งนั้นกับกล่องเลือก:

• <datalist>กล่องข้อความที่เลี้ยงมีสายเดียวสำหรับป้ายแสดงผลทั้งในและส่ง <option value='ie'>Internet Explorer</option>เลือกกล่องสามารถมีมูลค่าส่งฉลากแสดงผลเทียบกับที่แตกต่างกัน
• <datalist>กล่องข้อความที่เลี้ยงไม่สนับสนุน<optgroup>แท็กที่จะจัดแสดงผล
• คุณไม่สามารถ จำกัด ผู้ใช้ให้อยู่ในรายการตัวเลือก<datalist>เช่นเดียวกับที่คุณทำได้ด้วยไฟล์<select>.
• onChangeเหตุการณ์ทำงานแตกต่างกัน ใน<select>องค์ประกอบเหตุการณ์ onchange จะเริ่มทำงานทันทีเมื่อมีการเปลี่ยนแปลงในขณะ<input type="text"ที่เหตุการณ์จะเริ่มทำงานหลังจากองค์ประกอบสูญเสียโฟกัสหรือผู้ใช้กด Enter
• <datalist>มีการสนับสนุนที่ไม่แน่นอนในเบราว์เซอร์ วิธีแสดงตัวเลือกที่มีอยู่ทั้งหมดไม่สอดคล้องกันและสิ่งต่างๆจะแย่ลงจากตรงนั้น

ประเด็นสุดท้ายเป็นเรื่องใหญ่ในความคิดของฉัน เนื่องจากคุณจะต้องมีทางเลือกสำรองสำหรับการเติมข้อความอัตโนมัติที่เป็นสากลมากขึ้นจึงแทบไม่มีเหตุผลใดที่จะต้องประสบปัญหาในการกำหนดค่าไฟล์<datalist>. นอกจากนี้การเสียบเติมข้อความอัตโนมัติที่เหมาะสมจะช่วยให้สามารถกำหนดรูปแบบการแสดงตัวเลือกของคุณได้ซึ่ง<datalist>ไม่ได้ทำ หากองค์ประกอบที่<datalist>ได้รับการยอมรับ<li>ซึ่งคุณสามารถปรับเปลี่ยนได้ตามที่คุณต้องการมันจะยอดเยี่ยมมาก! แต่ไม่มี.

ตราบเท่าที่ฉันสามารถบอกได้ว่าการ<datalist>ค้นหาเป็นการจับคู่แบบตรงทั้งหมดจากจุดเริ่มต้นของสตริง ดังนั้นหากคุณมี<option value="internet explorer">และค้นหา "explorer" คุณจะไม่ได้ผลลัพธ์ ปลั๊กอินเติมข้อความอัตโนมัติส่วนใหญ่จะค้นหาที่ใดก็ได้ในข้อความ

ฉันใช้<datalist>เป็นเพียงตัวช่วยอำนวยความสะดวกที่รวดเร็วและขี้เกียจสำหรับหน้าเว็บภายในบางหน้าซึ่งฉันรู้ด้วยความมั่นใจ 100% ว่าผู้ใช้มี Chrome หรือ Firefox รุ่นล่าสุดและจะไม่พยายามส่งค่าปลอม สำหรับกรณีอื่น ๆ ยากที่จะแนะนำให้ใช้<datalist>เนื่องจากการรองรับเบราว์เซอร์ที่แย่มาก

Datalist รวมถึงการเติมข้อความอัตโนมัติและคำแนะนำโดยกำเนิดนอกจากนี้ยังสามารถอนุญาตให้ผู้ใช้ป้อนค่าที่ไม่ได้กำหนดไว้ในคำแนะนำ

เลือกเฉพาะตัวเลือกที่กำหนดไว้ล่วงหน้าที่ผู้ใช้ต้องเลือก

รายการข้อมูลเป็นแท็ก HTML ใหม่ในเบราว์เซอร์ที่รองรับ HTML5 มันแสดงเป็นกล่องข้อความพร้อมรายการตัวเลือกบางอย่าง ตัวอย่างเช่นกล่องข้อความเพศจะมีตัวเลือกให้คุณเป็นชายหญิงเมื่อคุณพิมพ์ 'M' หรือ 'F' ในกล่องข้อความ

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

หากต้องการตอบคำถามบางส่วนของคุณโดยเฉพาะ "มีสถานการณ์ใดที่จะดีกว่าถ้าใช้อย่างใดอย่างหนึ่งหรือไม่" ให้พิจารณาแบบฟอร์มที่มีส่วนที่ทำซ้ำ หากส่วนการทำซ้ำมีselectแท็กจำนวนมากoptionจะต้องแสดงผลสำหรับแต่ละการเลือกสำหรับทุกแถว

ในกรณีเช่นนี้ฉันจะพิจารณาใช้datalistกับinputเพราะdatalistสามารถใช้ได้กับจำนวนinputs เท่าไหร่ก็ได้ ซึ่งอาจช่วยประหยัดเวลาในการแสดงผลบนเซิร์ฟเวอร์ได้มากและจะปรับขนาดได้ดีกว่ามากสำหรับจำนวนแถว

ฉันสังเกตว่าไม่มีคุณลักษณะที่เลือกในดาต้าลิสต์ ให้ทางเลือกแก่คุณเท่านั้น แต่ไม่มีตัวเลือกเริ่มต้น คุณไม่สามารถแสดงตัวเลือกที่เลือกในหน้าถัดไปได้เช่นกัน

มีอีกความแตกต่างที่สำคัญระหว่างเป็นและselect datalistปัจจัยสนับสนุนเบราว์เซอร์มาที่นี่

select ได้รับการสนับสนุนอย่างกว้างขวางโดยเบราว์เซอร์เมื่อเทียบกับ datalist โปรดดูที่หน้านี้สำหรับการสนับสนุนเบราว์เซอร์ที่สมบูรณ์ของ datalist -

การสนับสนุนเบราว์เซอร์ Datalist

ในกรณีที่เลือกได้รับการสนับสนุนในทุกเบราว์เซอร์อย่างมีประสิทธิภาพ (ตั้งแต่ IE6 +, Firefox 2+, Chrome 1+ เป็นต้น)

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

ผู้ใช้จะสามารถเขียนรายการที่ไม่มีในรายการ