带有搜索框的单个下拉列表

Question

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

代码：

<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 框架兼容。

Answer 1

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

插件link：Select2

Answer 2

您可以使用语义ui来实现此功能

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

Answer 3

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

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

注意：确保input中list属性的值与datalist的id相同

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

Answer 4

我使用 HTML 和 CSS 制作了自定义下拉菜单，顶部的搜索标签固定在 dropdown.You 的顶部可以使用以下 HTML CSS 与 bootstrap:-

<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

Answer 5

如果你不喜欢外部库，你可以使用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>

Answer 6

使用Select2。对于安装过程 Click Here

带有搜索框的单个下拉列表

Single Dropdown with search box in it

html

javascript

jquery

dropdownbox

search-box