24

Próbuję użyć Twitter Typeahead z Bootstrap 3 RC1, ponieważ Bootstrap spadła własną wtyczkę wpisywanie znaków z wyprzedzeniem od wersji 3.wpisywanie znaków z wyprzedzeniem problemy z Bootstrap 3.0 RC1

Używam następujący kod HTML na mojej postaci:

<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 wpisywanie znaków z wyprzedzeniem, pole tekstowe wyszukiwania wyświetlane tak:

before adding Typeahead

Potem dodałem wpisywanie znaków z wyprzedzeniem jak t jego:

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

after adding Typeahead

when typing some text...

Czy robię coś źle czy to tylko błąd na wpisywanie znaków z wyprzedzeniem lub Bootstrap 3 RC1?

+1

możliwe duplikat [numerze CSS na Twitterze wpisywanie znaków z wyprzedzeniem z Bootstrap 3] (http://stackoverflow.com/questions/18059161/css-issue-on-twitter-typeahead- with-bootstrap-3) –

+1

Chociaż wsparcie zostało usunięte, możesz użyć "starej" wtyczki https://github.com/bassjobsen/Bootstrap-3-Typeahead –

Odpowiedz

39

aktualizacja 14 feb 2014

Jak wspomniano przez laurent-wartel spróbować https://github.com/hyspace/typeahead.js-bootstrap3.less lub https://github.com/bassjobsen/typeahead.js-bootstrap-css dodatkowych CSS używać typeahead.js z Bootstrap 3.1.0.

lub użyć użyć „starą” (TB 2) wtyczki z nowym silnikiem Bloodhound sugestia: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26


wpisywanie znaków z wyprzedzeniem Twittera nie wydaje się gotowy do Twittera Bootstrap 3. Aby korzystać wpisywanie znaków z wyprzedzeniem Twittera z Twittera Bootstrap będziesz potrzebował some extra CSS (przestarzałe, już nie konserwowane). Używanie tego CSS nie rozwiązuje twoich problemów.

W twoim przykładzie pole wejściowe nie ma szerokości 100%. Będzie to spowodowane przez JavaScript. Javascript owija wejście w okres:

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

Ta rozpiętość nie dostał 100% tak samo wejście do środka. Aby naprawić, dodaj do swojego CSS:

.twitter-typeahead { 
    width: 100%; 
} 

Javascript ustawia kolor tła twojego wejścia jako przezroczysty. Jeśli nie chcesz, aby zmienić źródło wtyczki i będzie potrzebować dodatkowych Javascript aby rozwiązać ten problem:

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

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

aktualizacja

Oryginalny pytanie było dla RC1 na Twitterze za Bootstrap 3.0.0.trzeba także dodać:

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

New bootply: http://bootply.com/86305

+0

Działa bardzo dobrze. Dziękuję również, że wskazałem inną odpowiedź! – javsmo

+6

Ponadto warto dodać .tt-podpowiedź do tego CSS, inaczej wskazówka jest odcięta w pierwotnej szerokości, tak: '.twitter-wpisywanie znaków z wyprzedzeniem, .tt-wskazówka { width: 100%; } ' –

-2

Zamiast Twitter wpisywanie znaków z wyprzedzeniem, spróbuj użyć bootstrap-select. Ta biblioteka jest zintegrowana z Bootstrap 3 i ma szerszą funkcjonalność.

+3

Połączony link bootstrap-select nie zastępuje autouzupełniania nagłówków. Służą różnym celom. –

+0

Myślę, że może być, zwłaszcza za pomocą drugiego [wersja tego lib (select2)] (http://ivaynberg.github.io/select2/) –

2

Wystarczy popatrzeć na typeahead.js-bootstrap3.less.

To doskonale współpracuje z najnowszą wersją Bootstrap (v3.0.3) i pozwala zachować swój własny Skórki. Istnieje również plik .css z domyślnym motywem bootstrap.

1

Typeahead.js mocowanie css mieć również problemy z grup wejściowych (narożniki zaokrąglenia), znalazłem gdzieś informacje, że rozkłada się na czasowniki modalne, itp Dodatkowo https://github.com/jharding/typeahead.js-bootstrap.css jest już utrzymane tak mam zamiar dać szansę na bas Jobsen rozwiązanie;)

+1

Po spędzeniu kilku godzin najlepszy zamiennik dla mnie jest https: // github .com/biggora/bootstrap-ajax-typeahead (dla tablic ajax json), ładnie współpracuje z bs 3.0.3. Będę musiał sprawdzić poprawkę css, ale powinien działać łatwo, ponieważ szablony generowania dropdown są łatwo dostępne. (oczywiście .typeahead.dropdown-menu {szerokość: 100%} jest wymagana: D) jest 1 błąd w przykładach dla ajax, showLoadingMask nie działa (artefakt BS 2?) Niestety nie ma buforowania dla żądań jeszcze;) – 3176243

0

Po wielu badaniach bez powodzenia we wszystkich stylach, dodając, że w końcu ustalone to dodanie jednej linii wewnątrz konstruktora wpisywanie znaków z wyprzedzeniem (bootstrap.js lub bootstrap-typeahead.js w zależności od wersji):

to. $ Menu.width (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()); 
} 
Powiązane problemy