带有自动完成 + 静态值的下拉菜单

Question

我想在您单击可以搜索数据的图标时创建一个下拉列表。我会用一张图片来说明这一点：

您可以在 .... 规则中输入您的测验名称。 然后在 dropdwon 的第二部分中，您将根据搜索词看到来自数据库的测验。

在下拉列表的第三部分，我想显示最近的 5 个调查（这必须是静态的，而不是在搜索词更改时发生变化）。

在下拉列表的第四部分，我还想显示静态值。

这可能与select2.js 有关吗？ 或者有人可以帮我从这个开始吗？我真的不知道如何开始。我知道如何根据搜索词显示数据。但这是下拉列表的第三和第四部分，我真的不知道如何在它下面显示...

Answer 1

您可以使用任何下拉 API，但如果您想使用静态值自动完成，您应该使用 html5 表单元素“<datalist >”

这里是例子

<form action="demo_form.asp" 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>