it-swarm.com.de

CSS Ausgabe auf Twitter Typeahead mit Bootstrap 3

Mit der Veröffentlichung von Bootstrap 3 wurde zu diesem Zweck Typeahead entfernt:
https://github.com/Twitter/typeahead.js

Ich habe es erfolgreich beim Remote-Abruf von Daten integriert

aber ich habe problem mit der autovervollständigung

enter image description here

wie Sie sehen, werden zwei Text in der Textbox angezeigt.

Ich habe die css ( https://github.com/jharding/typeahead.js-bootstrap.css ) wie in der Dokumentation erwähnt angegeben, aber kein Glück.

jede Hilfe oder Anregung wäre dankbar.

jsfiddle zeigt das Problem:
http://jsfiddle.net/KrtB5/

HTML

<body>
    <div class="container">
        <label>State</label> <input type="text" class="typeahead form-control" />
    </div>
</body>

Javascript:

$('.typeahead').typeahead({
    name: 'Some name',
    local: ['test', 'abc', 'def']
})
59
Jaime Sangcap

EDIT: Aktualisiert für Bootstrap 3.0EDIT 2: Typeahead-Aufruf wurde geändert. Siehe neues jsfiddle

Nachdem man mit dem Styling herumgespielt hat, sieht es so aus, als würde die Form-Control-Klasse nicht ganz mit dem tt-Hinweis übereinstimmen. Also habe ich dafür gesorgt, dass sich die Ränder und Grenzen ausrichten. Nehmen Sie die Antwort von Hieu Nguyen, fügen Sie den Grenzradius hinzu und unterstützen Sie Eingabe-Klein/Eingabe-Groß

CSS

.Twitter-typeahead .tt-hint
{
    display: block;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border: 1px solid transparent;
    border-radius:4px;
}

.Twitter-typeahead .hint-small
{
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.5;
}

.Twitter-typeahead .hint-large
{
    height: 45px;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
    line-height: 1.33;
}

Skript für Eingabe-Klein/Eingabe-Groß

$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

Jsfiddle wurde aktualisiert: http://jsfiddle.net/KrtB5/542/

58
Nick P

Hmm, es sieht so aus, als wäre .form-control eine neue Klasse in Bootstrap 3 RC und es ist ein Übeltäter (zweifellos ist dies nur eine RC-Version mit vielen Problemen). Sie können den Stil dieser Klasse einfach in die .tt-hint-Klasse kopieren. So:

.Twitter-typeahead .tt-hint {
    display: block;
    height: 38px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border: 1px solid transparent;
}

Geige arbeiten: http://jsfiddle.net/KrtB5/2/

Update, das besser mit jQuery 1.9.1 und Bootstrap 3.0.0 funktioniert: http://jsfiddle.net/KrtB5/13

16
Hieu Nguyen

Überprüfen Sie dies heraus:

$('#foo').typeahead(...);
$('.tt-hint').addClass('form-control');
14
Andreas

Es gibt auch einen inoffiziellen Port des Bootstrap 2 Typeahead Plugins:

Bootstrap 3 Typeahead

Bootstrap 3 Typeahead

Es erfordert kein zusätzliches CSS und funktioniert mit der neuesten Version von Bootstrap.

Hier ist eine Demo von Plunker.

7
Paolo Moretti

Nicht nur .tt-Hinweis ist brocken, sondern auch andere CSS-Klassen.

Die beste Lösung, die in allen Browsern funktioniert, ist das Hinzufügen der zusätzlichen CSS, die die CSS-Probleme zwischen Typeahead.js und Bootstrap 3 behebt:

https://github.com/jharding/typeahead.js-bootstrap.css

4
optimister

Wenn Sie bootstrap.less verwenden, haben Sie es viel einfacher. BS 3 installiert WENIGER 1.4.1, das jetzt "Erweiterungsgüte" enthält. see Less und Bootstrap: Wie benutzt man eine span3 (oder spanX [any number]) Klasse als Mixin?

Erweitern ist ein Killer-Feature für WENIGER jetzt. Sie können jetzt (explizit benannte) Klassen vollständig erben ... _. Sie müssen also keine Eigenschaften wie in den CSS-Antworten von Hieu Nguyen und Nick P kopieren. WENIGER wird alles mit:

.Twitter-typeahead .tt-hint:extend(.form-control all)
{}

Der https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less less-Code ist für BS 3 defekt. Ich habe ihn als Ausgangspunkt verwendet. und fügte hinzu, dass das Dropdown-Menü nicht wie im BS 2-Typenkopf umbrochen wird. Meine letzte Datei ist:

.tt-dropdown-menu
{
    min-width: 160px;
    margin-top: 2px;
    padding: 5px 0;
    /* from BS dropdowns.less .dropdown-menu */
    /* background-color: @dropdownBackground;*/
    background-color: @dropdown-bg;

    /* 
    border: 1px solid #ccc;
    border: 1px solid @dropdownBorder;
    border: 1px solid @dropdownBorder;*/
    border: 1px solid @dropdown-fallback-border; // IE8 fallback
    border: 1px solid @dropdown-border;

    *border-right-width: 2px;
    *border-bottom-width: 2px;

    /*BS2 replaced with BS dropdowns.less .dropdown-menu*/
    /*.border-radius(6px);*/
    border-radius: 6px;

    /*.box-shadow(0 5px 10px rgba(0,0,0,.2));
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;*/
    .box-shadow(0 6px 12px rgba(0,0,0,.175));

    background-clip: padding-box;

}

.tt-suggestion
{
    display: block;
    padding: 3px 20px;
}

    .tt-suggestion.tt-is-under-cursor
    {
        /*color: @dropdownLinkColorHover;
        #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));*/
        color: @dropdown-link-hover-color;
        background-color: @dropdown-link-hover-bg;
    }

        .tt-suggestion.tt-is-under-cursor a
        {
            /*color: @dropdownBackground;*/
            color: @dropdown-bg;
        }

    .tt-suggestion > p
    {
        margin: 0;
        white-space: nowrap !important;     //dont conform suggestion to parent input width
    }


/*https://stackoverflow.com/questions/18059161/css-issue-on-Twitter-typeahead-with-bootstrap-3*/
.Twitter-typeahead
{
    display: block;
    width: 100%; //BS 3 needs this to inherit this for children
}

.Twitter-typeahead .tt-hint:extend(.form-control all)
{
    color: @input-color-placeholder; //show hint distinct from input
}
4
RockResolve

Eine umfassende Lösung (empfohlen in diesem Fehlerbericht bei Typeahead)

https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.css

/*
 * typehead.js-bootstrap3.less
 * @version 0.2.3
 * https://github.com/hyspace/typeahead.js-bootstrap3.less
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
.has-warning .Twitter-typeahead .tt-input,
.has-warning .Twitter-typeahead .tt-hint {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .Twitter-typeahead .tt-input:focus,
.has-warning .Twitter-typeahead .tt-hint:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-error .Twitter-typeahead .tt-input,
.has-error .Twitter-typeahead .tt-hint {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .Twitter-typeahead .tt-input:focus,
.has-error .Twitter-typeahead .tt-hint:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-success .Twitter-typeahead .tt-input,
.has-success .Twitter-typeahead .tt-hint {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .Twitter-typeahead .tt-input:focus,
.has-success .Twitter-typeahead .tt-hint:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.input-group .Twitter-typeahead:first-child .tt-input,
.input-group .Twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.input-group .Twitter-typeahead:last-child .tt-input,
.input-group .Twitter-typeahead:last-child .tt-hint {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.input-group.input-group-sm .Twitter-typeahead .tt-input,
.input-group.input-group-sm .Twitter-typeahead .tt-hint {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
select.input-group.input-group-sm .Twitter-typeahead .tt-input,
select.input-group.input-group-sm .Twitter-typeahead .tt-hint {
  height: 30px;
  line-height: 30px;
}
textarea.input-group.input-group-sm .Twitter-typeahead .tt-input,
textarea.input-group.input-group-sm .Twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-sm .Twitter-typeahead .tt-input,
select[multiple].input-group.input-group-sm .Twitter-typeahead .tt-hint {
  height: auto;
}
.input-group.input-group-sm .Twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-sm .Twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}
.input-group.input-group-sm .Twitter-typeahead:first-child .tt-input,
.input-group.input-group-sm .Twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group.input-group-sm .Twitter-typeahead:last-child .tt-input,
.input-group.input-group-sm .Twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.input-group.input-group-lg .Twitter-typeahead .tt-input,
.input-group.input-group-lg .Twitter-typeahead .tt-hint {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
select.input-group.input-group-lg .Twitter-typeahead .tt-input,
select.input-group.input-group-lg .Twitter-typeahead .tt-hint {
  height: 46px;
  line-height: 46px;
}
textarea.input-group.input-group-lg .Twitter-typeahead .tt-input,
textarea.input-group.input-group-lg .Twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-lg .Twitter-typeahead .tt-input,
select[multiple].input-group.input-group-lg .Twitter-typeahead .tt-hint {
  height: auto;
}
.input-group.input-group-lg .Twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-lg .Twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}
.input-group.input-group-lg .Twitter-typeahead:first-child .tt-input,
.input-group.input-group-lg .Twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group.input-group-lg .Twitter-typeahead:last-child .tt-input,
.input-group.input-group-lg .Twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
.Twitter-typeahead {
  width: 100%;
}
.input-group .Twitter-typeahead {
  display: table-cell !important;
  float: left;
}
.Twitter-typeahead .tt-hint {
  color: #999999;
}
.Twitter-typeahead .tt-input {
  z-index: 2;
}
.Twitter-typeahead .tt-input[disabled],
.Twitter-typeahead .tt-input[readonly],
fieldset[disabled] .Twitter-typeahead .tt-input {
  cursor: not-allowed;
  background-color: #eeeeee !important;
}
.tt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 160px;
  width: 100%;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
}
.tt-dropdown-menu .tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor {
  text-decoration: none;
  outline: 0;
  background-color: #f5f5f5;
  color: #262626;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor a {
  color: #262626;
}
.tt-dropdown-menu .tt-suggestion p {
  margin: 0;
}
3
user

Basierend auf Andreas Antwort würde ich für Folgendes mit weniger setzen:

.tt-hint { 
   .form-control;
}
1
Gonzalo Muro

Das hat bei mir funktioniert. Möglicherweise müssen Sie mit den oberen und linken Zahlen spielen, um es richtig zu machen.

$('#typeahead').typeahead(...);
$(".tt-hint").css('top','3px');
$(".tt-hint").css('left','1px');
1
Pramod Shivale

Von Typeahead-Probleme mit Bootstrap 3.0 RC1 : Wie von [laurent-wartel] [2] erwähnt, versuchen Sie https://github.com/hyspace/typeahead.js-bootstrap3.less oder https://github.com/bassjobsen/Bootstrap-3-Typeahead für zusätzliches CSS zur Verwendung von typeahead.js mit Bootstrap 3.1.0.

Oder verwenden Sie das "alte" (TB 2) Plugin mit der neuen Bloodhound-Vorschlagsmaschine: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

0
Bass Jobsen

Eine sauberere Lösung

.tt-small {

    .Twitter-typeahead {

        display: block !important; // Note: Override inline styles set by JavaScript

        &> .tt-hint {

            &:extend(.form-control);

            color: @medium-gray;

        }
    }
}

Wo die Markierung so aussieht:

<div class="form-group">
    <label class="col-lg-3 col-sm-3 control-label" for="mydropdown">Dropdown</label>
    <div class="col-lg-6 col-sm-6 tt-mydropdown tt-small">
        <input class="form-control" id="mydropdown" placeholder="Dropdown" type="text">
    </div> <!-- tt-small end -->
</div>
0
Dylan Madisetti

Die Lösung, die ich fand, bestand darin, einfach eine weitere CSS-Klasse (from-group-lg) zu meinem Formulargruppenelement hinzuzufügen.

Mein HTML:

<div class="form-group form-group-lg">
  <label class="control-label" for="my-large-typeahead">Type to automcoplete:</label>
  <input type="text" class="form-control typeahead" id="my-large-typeahead">
</div>

In meiner SCSS-Datei habe ich hinzugefügt:

.form-group-lg .tt-hint
{
    @extend .input-lg;
}
0
totas

Sie müssen keine dieser komplizierten Implementierungen durchgehen, sondern nur hinzufügen 

style="position: relative"

Zum übergeordneten Element Es verwendet absolute Positionierung, es muss nur wissen, auf was „absolut“ Sie sich beziehen.

0
Kirk Strobeck

Ein weiterer Ansatz, um Twitter Typeahead mit Bootstrap 3 zu arbeiten.

// Using jQuery, we remove the inline styles compulsively added by Twitter Typeahead.
// We need to do this because, if not, styles on our stylesheets won't be able to
// override those inline styles.
$('.Twitter-typeahead, .typeahead').attr('style',''); 

In Ihrem LESS Stylesheet können Sie dann Folgendes hinzufügen:

// Twitter Typeahead

.Twitter-typeahead {
  position: relative;

  .tt-hint {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: @input-bg;
    border: none;
  }

  .tt-input {
    position: relative;
    vertical-align: top;
  }

  .tt-hint + .tt-input {
    background-color: transparent;
  }

  .tt-dropdown-menu {
    &:extend(.dropdown-menu all);
  }

  .tt-suggestion {
    &:extend(.dropdown-menu > li > a all);
    p {
      margin-bottom: 0;
    }
  }

  .tt-cursor {
    &:extend(.dropdown-menu > .active > a all);
  }

}
0