html - Twitter Bootstrap inline invoer met dropdown

Ik probeer een tekstinvoer inline weer te geven met een vervolgkeuzeknop. Ik kom er echter niet uit hoe ik dit moet doen. Dit is de HTML die ik heb geprobeerd (ik heb alles op één regel gezet zonder resultaat):

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

Is dit mogelijk?

Bedankt

Antwoord 1, autoriteit 100%

Huidige staat: standaardimplementatie in documenten

Momenteel is er een standaard implementatie van input+dropdown combo in de documentatie hier(zoek naar “Knop dropdowns”). Ik laat de originele oplossing voor de goede orde en voor degenen die de oplossing nu niet kunnen gebruiken in de documentatie.

Originele oplossing

Ja, dat is mogelijk. In feite is er één voorbeeld in de Twitter Bootstrap-documentatie(volg de link en zoek “Voorbeelden” voor dropdown-knoppen):

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

Indien ingesloten in tekst, kan het er als volgt uitzien (met tekst op de knop gewijzigd, niets anders):

BEWERKEN:

Als u <input>probeert te bereiken met een toegevoegd vervolgkeuzemenu zoals in de vervolgkeuzeknoppen, dan is dit een van de oplossingen:

Voeg een klasse btn-grouptoe aan het element dat klasse input-appendheeft,
Voeg elementen toe met klassen dropdown-toggleen dropdown-menuaan het einde van het element met class input-append,
Overschrijf stijl voor element dat overeenkomt met .input-append .btn.dropdown-menuzodat het geen float: leftheeft (anders komt het in de volgende regel).

De resulterende code kan er als volgt uitzien:

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

met een beetje ondersteuning van deze stijloverschrijving:

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

en u exact hetzelfde resultaat geven als dit:

EDIT 2:de CSS-kiezer bijgewerkt (was .dropdown-menu, is .dropdown-toggle).

Antwoord 2, autoriteit 20%

Vanaf Bootstrap 3.x is er een voorbeeld hiervan in de documenten hier: 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 -->

Antwoord 3, autoriteit 9%

Zoek naar de tag “datalist”.

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

Antwoord 4, autoriteit 6%

Dit is de code voor Bootstrap met invoerzoekkeuzemenu.
Ik zoek veel en dan probeer ik het in javascript en html met bootstrap,

HTML-code:

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

Javascript-code:

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";
    }

U kunt ook jQuery- en json-code gebruiken volgens uw vereisten.

Uitvoer zoals:

Antwoord 5, autoriteit 6%

Dit is mijn oplossing: gebruik 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

een

<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

Snippet uitvouwen

Antwoord 6, autoriteit 5%

De Bootstrap Combobox van Daniel Farrelldoet het werk perfect. Hier is een voorbeeld uit zijn GitHub-repository.

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

Snippet uitvouwen

Previous articleRijen van dataframes ordenen volgens vector met een specifieke volgorde

Next articleAantal opmaak aslabels in ggplot2?

Twitter Bootstrap inline invoer met dropdown

Antwoord 1, autoriteit 100%

Huidige staat: standaardimplementatie in documenten

Originele oplossing

Antwoord 2, autoriteit 20%

Antwoord 3, autoriteit 9%

Antwoord 4, autoriteit 6%

Antwoord 5, autoriteit 6%

Antwoord 6, autoriteit 5%

Other episodes

Invoertype=wachtwoord, laat de browser het wachtwoord niet onthouden

VueJS/browser caching productie builds

Verhogingspijlen aanpassen bij invoer van typenummer met CSS

Angular 4 img src is niet gevonden

HTML-tags binnen <label>

Items die alle kolommen/rijen beslaan met behulp van CSS-rasterlay-out

Angular 2 Hash (#) van de URL verwijderen