带有搜索框的单个下拉菜单答案

【问题标题】：Single Dropdown with search box in it带有搜索框的单个下拉菜单
【发布时间】：2016-08-11 07:29:00
【问题描述】：

我想将搜索框添加到单个选择下拉选项中。

代码：

<select id="widget_for" name="{{widget_for}}">
<option value="">select</option>

{% for key, value in dr.items %}

<input placeholder="This ">

<option value="{% firstof value.id key %}" {% if key in selected_value %}selected{% endif %}>{% firstof value.name value %}</option>


{% endfor %}
</select>

如上添加输入标签行不通。

我尝试过使用 html5-datalist，它可以工作。我想要一些其他选项，因为 html5-datalist 不支持 chrome 中的可滚动选项。

谁能推荐任何其他搜索框选项？它们应该与 django-python 框架兼容。

【问题讨论】：

标签： javascript jquery html dropdownbox search-box

【解决方案1】：

只需使用 select2 插件即可实现此功能

插件链接：Select2

【讨论】：

【解决方案2】：

还有一个纯 HTML 解决方案您可以使用 datalist element 来显示建议：

<div>
    <datalist id="suggestions">
        <option>First option</option>
        <option>Second Option</option>
    </datalist>
    <input  autoComplete="on" list="suggestions"/> 
</div>

注意：确保输入中list属性的值与datalist的id一致。

请注意，并非所有浏览器都（完全）支持 Datalist 元素，您可以在 Can I use 上看到。

【讨论】：

【解决方案3】：

如果你不喜欢外部库，可以使用 HTML5 元素datalist。

来自W3School的示例：

 <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>

【讨论】：

【解决方案4】：

我使用 HTML 和 CSS 制作了一个自定义下拉菜单，顶部有搜索标签，固定在下拉菜单的顶部。您可以使用以下 HTML 和 CSS 和引导程序：-

<div class="dropdown dropdown-scroll">
<button class="btn btn-default event-button dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    <span>Search</span>
    <span class="caret"></span>
</button>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <div class="input-group input-group-sm search-control">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
        </span>
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <ul class="dropdown-list">
        <li role="presentation" ng-repeat='item in items | filter:eventSearch'>
            <a>{{item}}</a>
        </li>
    </ul>
</div>

上面代码的CSS是：-

.dropdown.dropdown-scroll .dropdown-list{
    max-height: 233px;
    overflow-y: auto;
    list-style-type: none;
    padding-left: 10px;
    margin-bottom: 0px;
}
.dropdown-list  li{
    font-size: 14px;
    height: 20px;
}

.dropdown-list  li > a{
    color: black;
}
.dropdown-list a:hover{
   color: black;
}

.dropdown-list li:hover{
    background-color: lightgray;
}

Screenshot of the dropdown

【讨论】：

【解决方案5】：

你可以使用semantic ui来实现这个功能

https://semantic-ui.com/introduction/new.html

【讨论】：

【解决方案6】：

使用Select2。安装过程Click Here

【讨论】：

这与之前提出相同问题的答案有何不同？