Question

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

代码：

<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插件即可实现此功能

插件链接：Select2

Answer 2

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

还有一个简单的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相同。

请注意，并非所有浏览器都（完全）支持数据列表元素，如您在Can I use上所见。

Answer 4

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

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

Answer 5

我使用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

Answer 6

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

单个下拉列表，其中包含搜索框

6 个答案: