html - style - Entrada en línea de Twitter Bootstrap con menú desplegable

input group bootstrap 3 (6)

Estoy tratando de mostrar una entrada de texto en línea con un botón desplegable. Sin embargo, no puedo entender cómo hacerlo. Este es el código HTML que probé (lo puse todo en una sola línea sin resultados):

<div class="input-append"> <input type="text" placeholder="foo" class="input-mini"> <div class="btn-group"> <a id="amount_type" class="btn dropdown-toggle" data-toggle="dropdown" href="#">10<span class="caret"></span></a> <ul id="amount_type_options" class="dropdown-menu"> <li class="selected"><a href="#">10</a></li> <li><a href="#">100</a></li> <li><a href="#">1000</a></li> </ul> </div> </div>

es posible?

Gracias

Este es el código para Bootstrap con menú desplegable de búsqueda de entrada. Busco mucho y luego pruebo en javascript y html con bootstrap

Código HTML :

<div class="form-group"> <label class="col-xs-3 control-label">Language</label> <div class="col-xs-7"> <div class="dropdown"> <button id="mydef" class="btn dropdown-toggle" type="button" data-toggle="dropdown" onclick="doOn(this);"> <div class="col-xs-10"> <input type="text" id="search" placeholder="search" onkeyup="doOn(this);"></input> </div> <span class="glyphicon glyphicon-search"></span> </button> <ul id="def" class="dropdown-menu" style="display:none;" > <li><a id="HTML" onclick="mydef(this);" >HTML</a></li> <li><a id="CSS" onclick="mydef(this);" >CSS</a></li> <li><a id="JavaScript" onclick="mydef(this);" >JavaScript</a></li> </ul> <ul id="def1" class="dropdown-menu" style="display:none"></ul> </div> </div>

Código Javascript:

Puede usar código jquery y json también según su requisito.

Salida como:

Estado actual: implementación predeterminada en documentos

Actualmente hay una implementación predeterminada de entrada + menú desplegable en la documentación aquí (busque "Desplegable de botones"). Dejo la solución original para el registro y para aquellos que no pueden usar la solución ahora incluida en la documentación.

Solución original

Sí, es posible. Como cuestión de hecho, hay un ejemplo en la documentación de Twitter Bootstrap (siga el enlace y busque " Ejemplos " para los botones desplegables):

<div class="btn-group"> <a class="btn btn-primary" href="#"> <i class="icon-user icon-white"></i> User </a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> <li><a href="#"><i class="icon-trash"></i> Delete</a></li> <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> </div>

Si está dentro del texto, puede verse así (con el texto del botón modificado, nada más):

EDITAR:

Si está tratando de lograr <input> con el menú desplegable adjunto como en los botones desplegables, entonces esta es una de las soluciones:

Agregue una clase btn-group al elemento que tiene clase input-append ,
Agregue elementos con clases dropdown-toggle y dropdown-menu al final del elemento con clase input-append ,
Anule el estilo para la coincidencia de elementos .input-append .btn.dropdown-menu para que no tenga float: left (de lo contrario, pasará a la siguiente línea).

El código resultante puede verse así:

<div class="input-append btn-group"> <input class="span2" id="appendedInputButton" size="16" type="text"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> <li><a href="#"><i class="icon-trash"></i> Delete</a></li> <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> </div>

con un poco de apoyo de este estilo anulado:

.input-append .btn.dropdown-toggle { float: none; }

y le dará exactamente el mismo resultado que este:

EDIT 2: se actualizó el selector de CSS (fue .dropdown-menu , es .dropdown-toggle ).

A partir de Bootstrap 3.x, hay un ejemplo de esto en los documentos aquí: http://getbootstrap.com/components/#input-groups-buttons-dropdowns

<div class="input-group"> <input type="text" class="form-control" aria-label="..."> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div>

Esta es mi solución es pantalla de uso : en línea

Some text <div class="dropdown" style="display:inline"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </div> is here

Buscar "etiqueta datalist"

<input list="texto_pronto" name="input_normal"><datalist id="texto_pronto"><option value="texto A"><option value="texto B"></datalist>

Combobox Bootstrap de Daniel Farrell hace el trabajo a la perfección. Aquí hay un ejemplo de su repositorio de GitHub.

$(document).ready(function(){ $(''.combobox'').combobox(); // bonus: add a placeholder $(''.combobox'').attr(''placeholder'', ''For example, start typing "Pennsylvania"''); });

Como una ventaja adicional, he incluido un marcador de posición en el script porque no se aplica a la marcación.