HTML 表單：Select-Option 與 Datalist-Option

Question

我想知道 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>

數據列表選項

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

Answer 1

將其視為需求和建議之間的差異。 對於select元素，用戶需要選擇您給出的其中一個選項。 對於datalist元素，建議用戶選擇您給出的一個選項，但他實際上可以在輸入中輸入他想要的任何內容。

編輯1：您使用哪一個取決於您的要求。 如果用戶必須輸入您的一個選項，請使用select元素。 如果使用可以輸入任何內容，請使用datalist元素。

編輯2：在HTML生活標准中找到這個小竅門：“每個選項元素是datalist元素的后代......代表一個建議。”

Answer 2

從技術角度來看，它們完全不同。 <datalist>是其他元素的選項的抽象容器。 在您的情況下，您已經將它與<input type="text"使用，但您也可以將它與范圍，顏色，日期等一起使用.http：//demo.agektmr.com/datalist/

如果將它與文本輸入一起使用，作為一種自動完成，那么問題實際上是：使用自由格式文本輸入或預定的選項列表是否更好？ 在那種情況下，我認為答案更明顯一些。

如果我們專注於使用<datalist>作為文本字段的選項列表，那么這里有一些特定的區別：

• <datalist> fed文本框有一個字符串，用於顯示標簽和提交。 選擇框可以具有不同的提交值，而不是顯示標簽<option value='ie'>Internet Explorer</option> 。
• <datalist> fed文本框不支持<optgroup>標簽來組織顯示。
• 您不能像使用<select>那樣將用戶限制在<datalist>中的選項列表中。
• onchange事件的工作方式不同。 在<select>元素上，onchange事件在更改時立即觸發，而使用<input type="text" ，在元素失去焦點或用戶按Enter鍵后觸發事件。
• <datalist>對瀏覽器的支持非常普遍。 顯示所有可用選項的方式不一致，事情只會變得更糟。

在我看來，最后一點真的是最重要的一點。 由於您將需要更通用的自動完成回退，因此幾乎沒有理由遇到配置<datalist>的麻煩。 此外，任何體面的自動完成插件都可以為您的選項顯示提供樣式， <datalist>不會這樣做。 如果<datalist>接受<li>您可以操作的元素，那么它本來就非常棒！ 但不是。

另外，就我所知， <datalist>搜索與字符串的開頭完全匹配。 因此，如果您有<option value="internet explorer">並且您搜索了“資源管理器”，那么您將無法獲得任何結果。 大多數自動完成插件都會在文本中的任何位置進行搜索。

我只使用<datalist>作為一些內部頁面的快速和懶惰的便利幫助，我知道100％確定用戶擁有最新的Chrome或Firefox，並且不會嘗試提交虛假值。 對於任何其他情況，由於瀏覽器支持非常差，很難推薦使用<datalist> 。

Answer 3

Datalist包含本機自動完成和建議，它還允許用戶輸入未在建議中定義的值。

Select僅為您提供用戶必須選擇的預定義選項

Answer 4

數據列表是HTML5支持的瀏覽器中的新HTML標記。 它呈現為帶有一些選項列表的文本框。 對於性別文本框的示例，當您在文本框中鍵入“M”或“F”時，它將為您提供選項為男性女性。

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

Answer 5

我注意到datalist中沒有選定的功能。 它只為您提供選擇，但不能有默認選項。 您也無法在下一頁顯示所選選項。

Answer 6

要專門回答你的問題的一部分“是否有任何情況下使用其中一個更好？”，請考慮一個帶有重復部分的表格。 如果重復部分包含許多select標記，則必須為每行選擇為每個選擇呈現option s。

在這種情況下，我會考慮使用帶input datalist ，因為相同的datalist可以用於任意數量的input 。 這可能會在服務器上節省大量的渲染時間，並且可以更好地擴展到任意數量的行。

Answer 7

select和datalist之間還有另一個重要的區別。 這是瀏覽器支持因素。

與datalist相比，瀏覽器廣泛支持select。 請查看此頁面以獲得datalist的完整瀏覽器支持 -

Datalist瀏覽器支持

有效地支持所有瀏覽器的選擇（因為IE6 +，Firefox 2 +，Chrome 1+等）

Answer 8

它類似於select，但是datalist還有其他功能，如自動建議。 您甚至可以在鍵入時鍵入並查看建議。

用戶還可以編寫列表中沒有的項目。

Answer 9

如果您有數百個列表，例如。 大學名單，然后你想輸入自動完成而不是滾動。 早年的 facebook 這是用 AJAX cmiiw 完成的，而不是使用 html 5 非常容易。