如何在最后一个选项为文本输入的表单中创建选择输入？

Question

我想创建一个选择输入，其中有一些可供用户选择的选项。作为最后一个选项，应该有一个文本输入区域，如果用户不想从给定选项中进行选择，他可以在其中输入任何内容。我该怎么做？

目前，我在 HTML 部分中使用此代码

 <div class="form-group">
  <label for="postCategory">Catagory</label>
  <select class="form-control" name="category">
        <option name="table1" value="1"  selected="true" disabled="disabled">Select A Category</option>
        <option name="category1" value="general">General</option>
        <option name="Category2" value="tech">Tech</option>
  </select>
</div>

在后端，我在提交表单后收到以下代码的输入。

app.post('/compose', function(req, res) {
    console.log(req.body.category);
});

如果用户不想选择一般或技术类别并想创建自己的新类别，如何在选择的最后一个选项中添加文本输入？我怎样才能从后端收到呢？

Answer 1

如果我们想将文本输入作为选项，那将是非常困难的。我们能做的最好的就是像下面这样，

<input placeholder="Select a category" type="text" list="categories" name="category" />
<datalist id="categories">
      <option name="table1" value="1"  selected="true" disabled="disabled">Select A Category</option>
      <option name="category1" value="general">General</option>
      <option name="Category2" value="tech">Tech</option>
</datalist>

PS：<datalist> 仅适用于最新版本的 Chrome、Safari 和 Firefox。除了上述浏览器和 Internet Explorer 的旧版本外，大多数当代浏览器也将支持此功能。使用信息请参考https://caniuse.com/datalist。