Twitter Bootstrap inline entrée avec liste déroulante

État actuel: défaut de mise en œuvre dans les docs

Actuellement, il existe une implémentation par défaut de l'entrée+de liste déroulante liste déroulante dans la documentation ici (de la recherche pour "Bouton listes déroulantes"). Je laisse le solution originale pour l'enregistrement et pour ceux qui ne peuvent pas utiliser la solution maintenant inclus dans la documentation.

Solution originale

Oui, c'est possible. Comme une question de fait, il y a un exemple dans le Twitter Bootstrap, documentation (suivre le lien et de la recherche "Exemples" pour la liste déroulante des boutons):

<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 enfermé à l'intérieur d'un texte, il peut ressembler à ceci (avec le texte sur le bouton a changé, rien d'autre):

EDIT:

Si vous essayez d'atteindre <input> ajoutées menu dans la liste déroulante des boutons, puis c'est l'une des solutions:

1. Ajouter un btn-group classe à l'élément qui a input-append classe,
2. Ajouter des éléments avec des classes dropdown-toggle et dropdown-menu à la fin de l'élément avec la classe input-append,
3. Remplacer le style pour l'élément correspondant .input-append .btn.dropdown-menu afin de ne pas avoir float: left (sinon il va obtenir dans la ligne suivante).

Le code résultant peut ressembler à ceci:

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

avec un peu de soutien de ce style remplacer:

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

et vous donnera exactement le même résultat comme ceci:

EDIT 2: mis à Jour le sélecteur CSS (a .dropdown-menu, est .dropdown-toggle).

Ceci est le code de Bootstrap avec entrée de liste déroulante de recherche.
Je recherche beaucoup, alors j'ai essayer sa en javascript et html avec bootstrap,

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

Code Javascript :

function doOn(obj)
     {

        if(obj.id=="mydef")
        {
            document.getElementById("def1").style.display="none";
            document.getElementById("def").style.display="block";
        }
        if(obj.id=="search")
        {
            document.getElementById("def").style.display="none";

            document.getElementById("def1").innerHTML='<li><a id="Java" onclick="mydef(this);" >java</a></li><li><a id="oracle" onclick="mydef(this);" >Oracle</a></li>';

            document.getElementById("def1").style.display="block";
        }

    }
    function mydef(obj)
    {
        document.getElementById("search").value=obj.innerHTML;
        document.getElementById("def1").style.display="none";
        document.getElementById("def").style.display="none";
    }

Vous pouvez utiliser jquery et json, le code selon vos besoins.

Sortie comme:

De la recherche pour "datalist tag"

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