twitter-bootstrap 允许文本编辑的引导选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24662074/
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
Bootstrap select that allows text edit
提问by user441521
I'm using bootstrap and have some select/dropdown boxes. They don't allow me to edit the text and I would like to make this select list an editable field so it can act as a select from existing or type a new value and click a Save to save it. How would I be able to do this via bootstrap (since my entire site is made with bootstrap).
我正在使用引导程序并有一些选择/下拉框。他们不允许我编辑文本，我想让这个选择列表成为一个可编辑的字段，这样它就可以作为从现有的选择或键入一个新值并单击保存以保存它。我怎么能通过引导程序来做到这一点（因为我的整个网站都是用引导程序制作的）。
So all I have today is the select below, but it doesn't allow the user to type into the select box. I guess I'm looking for a mix textbox and select/dropdown.
所以我今天只有下面的选择，但它不允许用户在选择框中输入。我想我正在寻找混合文本框和选择/下拉列表。
<select id="selectGroups" class="form-control" size="1">
@foreach(var g in Model)
{
<option value="@g">@g</option>
}
</select>
回答by user441521
This looks like it solves my issue.
这看起来解决了我的问题。
Why does HTML 5 not have editable combobox or local menus built in?
I just make the class of said input control to "form-control" and I get the bootstrap look.
我只是将所述输入控件的类设置为“表单控件”，然后我得到了引导程序外观。
回答by vkorchagin
Take a look on Select2 widget: http://ivaynberg.github.io/select2/
看看 Select2 小部件：http: //ivaynberg.github.io/select2/
It allows text editing, and also you can check out bootstrap theme for it: https://fk.github.io/select2-bootstrap-css/
它允许文本编辑，你也可以查看它的引导程序主题：https: //fk.github.io/select2-bootstrap-css/
回答by Zach J.
Old, but I found this while running into the same problem. My solution - Use a Dropdown and replace the button with a text input
旧的，但我在遇到同样的问题时发现了这一点。我的解决方案 - 使用下拉菜单并用文本输入替换按钮
<div>
<input type="text" placeholder="" class="form-control dropdown-toggle" id="myInputId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" />
<div class="dropdown-menu" aria-labelledby="myInputId">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>