前端小技巧：让文本输入框兼得可选择和可输入

2023-12-07 13:06:39

大家好，我是程序猿蛋蛋哥，今天要跟大家分享一个小技巧，让我们的文本输入框变得更加灵活好用。

通常情况下，文本输入框只能让用户输入自由的内容，但有时我们又需要限制用户的输入范围。这时候，下拉选择框就派上用场了。不过，如果我们想要同时兼顾可选择和可输入两种功能，该怎么办呢？

解决方案：<datalist>标签

<datalist>标签是HTML5中新增的元素，它允许我们在文本输入框中提供一个可供选择的选项列表。用户既可以选择列表中的选项，也可以直接输入自己的内容。

使用方式

在<form>表单中创建一个文本输入框：

<input type="text" id="my-input">

创建一个<datalist>元素，并在其中列出选项：

<datalist id="my-datalist">
  <option value="Option 1">
  <option value="Option 2">
  <option value="Option 3">
</datalist>

将文本输入框的list属性设置为<datalist>的id：

<input type="text" id="my-input" list="my-datalist">

现在，当用户在文本输入框中输入时，就会自动出现<datalist>中列出的选项。用户可以选择这些选项，也可以直接输入自己的内容。

示例

让我们用一个示例来说明：

<form>
  <label for="my-input">请输入您的职业：</label>
  <input type="text" id="my-input" list="my-datalist">
  <datalist id="my-datalist">
    <option value="程序员">
    <option value="设计师">
    <option value="产品经理">
    <option value="其他">
  </datalist>
  <input type="submit" value="提交">
</form>