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

Posted

技术标签:

【中文标题】带有自动完成 + 静态值的下拉菜单【英文标题】:Dropdown with autocomplete + static values 【发布时间】:2013-12-02 17:53:16 【问题描述】:

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

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

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

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

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

【问题讨论】:

harvesthq.github.io/chosen 你能举个例子吗? ... 【参考方案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>

【讨论】:

以上是关于带有自动完成 + 静态值的下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章

样式自动填充或自动完成默认浏览器下拉菜单

引导自动完成输入下拉菜单未显示

自动完成下拉菜单未正确显示

前端开发之自动完成下拉菜单AJAX版

Toad 自动完成下拉菜单

Laravel 5.2 - 使用 jquery 自动完成下拉菜单