Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap select that allows text edit

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>
like image 267
user441521 Avatar asked Jul 09 '14 19:07

user441521


People also ask

What is the use of Selectpicker?

The selectpicker class is used in the select components to auto-initialize bootstrap-select as explained in the example: Example: HTML.

How do I select a dropdown in bootstrap?

To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

How do I style a selection dropdown in CSS?

There are many ways to design a <select> dropdown menu using CSS. The Dropdown Menu is mainly used to select an element from the list of elements. Each menu option can be defined by an <option> element that can nested inside the <select> element.

How do I move a dropdown to the right in bootstrap?

To right-align a menu, use . dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.


2 Answers

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.

like image 118
user441521 Avatar answered Sep 17 '22 14:09

user441521


Take a look on Select2 widget: 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/

like image 22
vkorchagin Avatar answered Sep 16 '22 14:09

vkorchagin