隐藏搜索输入选项的值[重复]

Question

使用搜索输入时，列表通常来自数据库，其中项目将具有 ID 和标题。为了更容易链接从搜索输入中选择的文本值，我通常将值设置为 ID，如下所示：

<input type="search" list="mylist">
<datalist id="mylist">
  <option value="1">Example</option>
  <option value="2">Test</option>
  <option value="3">Another one</option>
</datalist>

但据我所知，在 chrome 和其他浏览器上，这会导致值成为选项显示的“主要”内容，而标题是其下方的子文本。

从最终用户的角度来看，这看起来很糟糕：

有没有办法解决这个问题，使“id”或值不可见，但这仍然是提交表单时使用的值？

JSFiddle

Answer 1

<form action="/action_page.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>