Typehead problemy z Bootstrap 3.0 RC1

Próbuję użyć Twitter Typehead z Bootstrap 3 RC1, ponieważ Bootstrap porzucił własną wtyczkę typehead w wersji 3.

Używam następującego kodu HTML w moim formularzu: 

<div class="well">  
<form>
    <fieldset>
        <div class="form-group">
            <label for="query">Search:</label>
            <input type="text" class="form-control" name="query" id="query" placeholder="Start typing something to search...">              
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
    </fieldset>
</form>
</div>

Bez dodawania Typehead, pole wprowadzania wyszukiwania wyświetla się w następujący sposób:

przed dodaniem Typehead

Potem dodałem Typehead w ten sposób: 

<script>
    $('#query').typeahead({        
        local: ['alpha', 'bravo','charlie','delta','epsilon','gamma','zulu']
    });
</script>

I pole stało się mniejsze, z białym prostokątem w środku.

po dodaniu Typehead

podczas wpisywania tekstu...

Czy robię coś nie tak czy to tylko bug na Typehead czy Bootstrap 3 RC1?

Author: Bass Jobsen, 2013-08-11
Source

5 answers

Update 14 feb 2014

Jak wspomniano przez laurent-wartel try https://github.com/hyspace/typeahead.js-bootstrap3.less lub https://github.com/bassjobsen/typeahead.js-bootstrap-css dla dodatkowego CSS, aby użyć typehead.js with Bootstrap 3.1.0.

Lub użyj "starej" wtyczki (TB 2) z nowym silnikiem sugestii Bloodhound: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

Typ Twittera nie wydaje się gotowy na Bootstrap Twittera 3. Aby użyć typehead Twittera z Bootstrap Twittera, potrzebujesz dodatkowego CSS (przestarzałego, już nie utrzymywanego). Używanie tego CSS nie rozwiązuje twoich problemów.

W twoim przykładzie pole wejściowe nie ma 100% szerokości. Będzie to spowodowane przez Javascript. Javascript zawija dane wejściowe w zakres: 

<span class="twitter-typeahead" 
    style="position: relative; display: inline-block; direction: ltr;">

Ta rozpiętość nie ma 100%, więc wejdźcie w nią. Aby naprawić Dodaj do swojego CSS: 

.twitter-typeahead {
  width: 100%;
}

Javascript ustawia tło-kolor wejścia do przezroczystego. Jeśli nie chcesz zmienić źródła wtyczki będę potrzebował dodatkowych Javascript, aby to naprawić: 

$('.tt-query').css('background-color','#fff');

teraz powinien działać zgodnie z oczekiwaniami na podstawie Twojego przykładu. http://www.bootply.com/73439

Update

Pierwotne pytanie dotyczyło RC1 Dla Twittera Bootstrap 3.0.0. musisz również dodać: 

.tt-dropdown-menu {
   width:100%;        
}

Nowy bootply: http://bootply.com/86305

 39
Author: Bass Jobsen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:53:24

Spójrz na typehead.js-bootstrap3.mniej .

Działa świetnie z najnowszą wersją Bootstrap (v3.0.3) i pozwala zachować niestandardowy motyw. Istnieje również .plik css z domyślnym motywem bootstrap.

 2
Author: Laurent W.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-22 10:38:35

Typehead.JS css fixing ma również problemy z grupami wejściowymi( zaokrąglanie rogów), znalazłem gdzieś info, że łamie się na modalach itp. Additionaly https://github.com/jharding/typeahead.js-bootstrap.css nie jest już męczona, więc zamierzam spróbować rozwiązania Bass Jobsen;)

 1
Author: 3176243,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-09 06:33:59

Po wielu badaniach bez powodzenia w dodawaniu stylów, w końcu naprawiłem to dodanie jednej linii wewnątrz konstruktora Typeahead (bootstrap.js lub bootstrap-typehead.js w zależności od wersji):

To.$menu.szerokość (this.$ element.outerWidth ());

Oto kod: 

/* TYPEAHEAD PUBLIC CLASS DEFINITION
 * ================================= */

var Typeahead = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.typeahead.defaults, options)
    this.matcher = this.options.matcher || this.matcher
    this.sorter = this.options.sorter || this.sorter
    this.highlighter = this.options.highlighter || this.highlighter
    this.updater = this.options.updater || this.updater
    this.source = this.options.source
    this.$menu = $(this.options.menu)
    this.shown = false
    this.listen()
    this.$menu.width(this.$element.outerWidth());
}
 0
Author: lukiller,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-14 22:28:50

Zamiast typowania, spróbuj użyć bootstrap-select . Ta Biblioteka jest zintegrowana z Bootstrap 3 i ma szerszą funkcjonalność.

 -2
Author: Krzysztof Wilczek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-31 14:08:45