Проблемы с Typeahead с Bootstrap 3.0 RC1

Я пытаюсь использовать Twitter Typeahead с Bootstrap 3 RC1, потому что Bootstrap сбросил свой собственный плагин typeahead на версии 3.

Я использую следующий HTML-код в моей форме:

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

Без добавления Typeahead поле ввода поиска отображается следующим образом:

before adding Typeahead

Затем я добавил Typeahead следующим образом:

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

И поле стало меньше, с белым прямоугольником внутри него.

after adding Typeahead

when typing some text...

Я делаю что-то неправильно или это просто ошибка на Typeahead или Bootstrap 3 RC1?

Ответы

Ответ 1

обновление 14 февраля 2014

Как упоминалось laurent-wartel, попробуйте https://github.com/hyspace/typeahead.js-bootstrap3.less или https://github.com/bassjobsen/typeahead.js-bootstrap-css для дополнительного CSS для использования typeahead.js с Bootstrap 3.1.0.

Или используйте плагин "старый" (TB 2) с новым механизмом предложения Bloodhound: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

Твиттер typeahead не кажется готовым для Twitter Bootstrap 3. Чтобы использовать Twitter-тип с помощью Twitter Bootstrap, вам понадобится некоторый дополнительный CSS (устарел, больше не поддерживается). Использование этого CSS не устраняет ваши проблемы.

В вашем примере поле ввода не получает 100% ширины. Это будет причиной Javascript. Javascript обертывает вход в диапазон:

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

Этот диапазон не имеет 100%, поэтому внутри него. Чтобы исправить добавление в ваш CSS:

.twitter-typeahead {
  width: 100%;
}

Javascript устанавливает цвет фона вашего ввода прозрачным. Если вы не хотите менять источник плагина, мне понадобится дополнительный Javascript, чтобы исправить это:

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

Теперь нужно работать как ожидалось на основе вашего примера. http://www.bootply.com/73439

Обновление

Оригинальный вопрос был для RC1 для Twitter Bootstrap 3.0.0. вам также необходимо добавить:

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

Новый bootply: http://bootply.com/86305

Ответ 2

Посмотрите typeahead.js-bootstrap3.less.

Он отлично работает с последней версией Bootstrap (v3.0.3) и позволяет вам сохранять свои пользовательские темы. Существует также .css файл с тематикой бутстрапа по умолчанию.

Ответ 3

У исправления CSS-Typeahead.js также есть проблемы с группами ввода (округление углов), я нашел где-то информацию, что она ломается по модалам и т.д. Дополнительная https://github.com/jharding/typeahead.js-bootstrap.css больше не поддерживается, поэтому я собираюсь попробовать решение Bass Jobsen;)

Ответ 4

После большого количества исследований, не имеющих удачи при добавлении стилей, я, наконец, исправил добавление одной строки внутри конструктора Typeahead (bootstrap.js или bootstrap-typeahead.js в зависимости от вашей версии):

это $menu.width(это $element.outerWidth().);.

Здесь код:

/* 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());
}

Ответ 5

Вместо Twitter Typeahead попробуйте использовать bootstrap-select. Эта библиотека интегрирована в Bootstrap 3 и имеет более широкие функциональные возможности.