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

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

There's also a plain HTML solution You can use a datalist element to display suggestions:

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

Note:Ensure that value of list attribute in input is same as the id of datalist.

Please be advised not all broswers have (full) support for the Datalist Element, as you can see on Can I use.

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