HTML5 datalist只有选项值被隐藏

Question

我想隐藏 datalist 的值。我正在使用以下代码

<input list="options" oninput="console.log(this.value);" />
<datalist id="options">
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
  <option value="3">Product 3</option>
</datalist>

我指的是在输入框中显示 values 和 product 1，我需要仅显示 product 1,2,&3...

隐藏值 (1,2,3) .

注意: 这里传递了值1,2,3，所以我只想隐藏它们。

这是我的代码https://jsfiddle.net/69u5Leoa/

- Ramesh S

---

@DeepakYadav：我正在询问不同的问题 - Ramesh S

检查标记为“Duplicate”的输出，要求相同的内容。 - Deepak Yadav

你正在请求产品自动完成功能。 - user3851915

是的，你说得对..！ - Ramesh S

Answer 1

你可能想使用select，因为对于select元素，用户需要从你提供的选项中选择一个。

对于datalist元素，建议用户从你提供的选项中选择一个，但实际上他可以在输入框中输入任何内容。

你可以查看HTML表单：Select-Option vs Datalist-Option以获取更多信息。

<select id="options">
    <option></option>
    <option value="1">Product 1</option>
    <option value="2">Product 2</option>
    <option value="3">Product 3</option>
</select>

- Rex

---

谢谢你，@Rex。实际上，我正在传递产品值以进行“插入”操作，例如：如果我选择value="1"，则会插入“产品1”的详细信息。 - Ramesh S

这是我的代码 <option value="<?php echo $product['product_id']; ?>"><?php echo $product['name']; ?></option>。 - Ramesh S

我只想隐藏 <?php echo $product['product_id']; ?>。 - Ramesh S

哈哈，兄弟，不错。但我想要自动完成，所以我正在使用数据列表。 - Ramesh S

Answer 2

Value="<%# DataBinder.Eval(Container, "ItemIndex") %>"可以解决这个问题

- ComEngTr

---

谢谢回复 @ComEngTr，你能写出代码吗？ - Ramesh S

因为我不确定在哪里进行编辑，所以感到困惑。 - Ramesh S

你能否详细说明一下？你的回答非常简短且令人困惑。 - Guy Park