web-dev-qa-db-fra.com

Twitter Bootstrap entrée en ligne avec liste déroulante

J'essaie d'afficher une entrée de texte en ligne avec un bouton déroulant. Je n'arrive pas à comprendre comment faire cela. Voici le code HTML que j'ai essayé (j'ai tout mis sur une seule ligne sans résultat):

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

Est-ce possible?

Merci

htmltwitter-bootstraptextinput
50
Misha M

Etat actuel: implémentation par défaut dans docs

Il existe actuellement une implémentation par défaut de la combinaison entrée + liste déroulante dans la documentation ici (recherche de "liste déroulante de boutons"). Je laisse la solution originale pour l'enregistrement et pour ceux qui ne peuvent pas utiliser la solution maintenant incluse dans la documentation.

Solution originale

Oui c'est possible. En fait, il existe un exemple dans la documentation sur Twitter Bootstrap (suivez le lien et recherchez " Exemples " pour boutons déroulants):

<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 elle est incluse dans du texte, cela peut ressembler à ceci (avec le texte sur le bouton modifié, rien d’autre):

Twitter Bootstrap dropdown button within text

EDIT:

Si vous essayez d'obtenir <input> Avec le menu déroulant ajouté, comme dans les boutons déroulants, voici l'une des solutions:

  1. Ajouter une classe btn-group À l'élément qui a la classe input-append,
  2. Ajouter des éléments avec les classes dropdown-toggle Et dropdown-menu À la fin de l'élément avec la classe input-append,
  3. Redéfinissez le style pour la correspondance d'éléments .input-append .btn.dropdown-menu Afin qu'il ne comporte pas float: left (Sinon, il entrera 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 support de ce style, écrasez:

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

et vous donner exactement le même résultat que celui-ci:

enter image description here

EDIT 2: Mise à jour du sélecteur CSS (était .dropdown-menu, Est .dropdown-toggle).

61
Tadeck

À partir de Bootstrap 3.x, il existe un exemple de ceci dans la documentation ici: 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><!-- /btn-group -->
</div><!-- /input-group -->
13
Clint Harris

Ceci est ma solution est l'utilisation display: inline

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

une

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />Your 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
4
Hoàng Vũ Tgtt

Ceci est le code pour Bootstrap avec liste déroulante de recherche d’entrée. Je recherche beaucoup puis j’essaie de l’utiliser en javascript et en 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 code également selon vos besoins.

Sortie comme: enter image description here

enter image description here

enter image description here

4
ashish bhatt

Le Bootstrap Combobox de Daniel Farrell fait le travail parfaitement. Voici un exemple tiré de son référentiel GitHub.

$(document).ready(function(){
  $('.combobox').combobox();
  
  // bonus: add a placeholder
  $('.combobox').attr('placeholder', 'For example, start typing "Pennsylvania"');
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/css/bootstrap-combobox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/js/bootstrap-combobox.min.js"></script>

<select class="combobox form-control">
  <option></option>
  <option value="PA">Pennsylvania</option>
  <option value="CT">Connecticut</option>
  <option value="NY">New York</option>
  <option value="MD">Maryland</option>
  <option value="VA">Virginia</option>
</select>

En prime, j'ai inclus un espace réservé dans le script, car son application à la balise ne tient pas.

3
ThisClark

Recherche de "tag datalist"

<input list="texto_pronto" name="input_normal"><datalist id="texto_pronto"><option value="texto A"><option value="texto B"></datalist>
3
Jairo Frantiesco da Silva