Javascript 带有搜索框的单个下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36712967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Single Dropdown with search box in it
提问by s_user
I want to add search box to a single select drop down option.
我想将搜索框添加到单个选择下拉选项中。
Code:
代码：
<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>
Adding a input tags as above does not work out.
如上所述添加输入标签不起作用。
I have tried using html5-datalist and it works. I want some other options as html5-datalist does not support scrollable option in chrome.
我试过使用 html5-datalist 并且它有效。我想要一些其他选项，因为 html5-datalist 不支持 chrome 中的可滚动选项。
Can anyone suggest any other searchbox options? They should be compatible with django-python framework.
任何人都可以建议任何其他搜索框选项吗？它们应该与 django-python 框架兼容。
回答by Deepak
回答by Fahad Israr
There's also a plain HTML solution You can use a datalist elementto display suggestions:
还有一个纯 HTML 解决方案您可以使用datalist 元素来显示建议：
<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.
注意：确保 input 中 list 属性的值与 datalist 的 id 相同。
Please be advised not all broswers have (full) support for the Datalist Element, as you can see on Can I use.
请注意，并非所有浏览器都（完全）支持 Datalist 元素，正如您在Can I use 中看到的那样。
回答by Harry Le
If you don't like external library, you can use the HTML5 element datalist.
如果你不喜欢外部库，你可以使用 HTML5 元素datalist。
Example from W3School:
来自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>
回答by Morris S
you can use semantic uito implement this feature
您可以使用语义ui来实现此功能
回答by Deepak Jassi
I have made a custom dropdown using HTML and CSS with search tag on the top which is fixed at the top of dropdown.You can use the following HTML and CSS with bootstrap:-
我使用 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>
And CSS for the above code is:-
上面代码的 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;
}
