Проблемы с вводом текста в 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 поле ввода поиска выглядит следующим образом:

перед добавлением опережающего ввода

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

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

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

после добавления заголовка

при наборе текста...

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


jquery twitter-bootstrap twitter-bootstrap-3 typeahead.js bootstrap-typeahead
person javsmo    schedule 10.08.2013    source источник
comment
возможный дубликат проблемы CSS в Twitter Typeahead с Bootstrap 3   -  person Hieu Nguyen    schedule 11.08.2013
comment
Хотя поддержка прекращена, вы можете использовать старый плагин github.com/bassjobsen/Bootstrap-3-Typeahead.   -  person Bass Jobsen    schedule 18.09.2013

Ответы (5)


arrow_upward
39
arrow_downward

обновление от 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

Упреждающий тип Twitter не готов для Twitter Bootstrap 3. Чтобы использовать опережающий ввод Twitter с Bootstrap Twitter, вам потребуется дополнительный 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%;        
}

Новый загрузчик: http://bootply.com/86305

person Bass Jobsen    schedule 11.08.2013
comment
Кроме того, вы можете добавить .tt-hint в этот CSS, иначе подсказка обрезается по исходной ширине, поэтому: .twitter-typeahead, .tt-hint { width: 100%; } - person a darren; 02.10.2013

arrow_upward
2
arrow_downward

Взгляните на typeahead.js-bootstrap3.less.

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

person Laurent W.    schedule 03.01.2014

arrow_upward
1
arrow_downward

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

person 3176243    schedule 09.01.2014
comment
Потратив несколько часов, лучшей заменой для меня является github.com/biggora/bootstrap-ajax-typeahead (для массивов ajax json), прекрасно работает с bs 3.0.3. Мне нужно будет проверить исправление CSS, но должно работать легко, так как шаблоны генерации выпадающего списка легко доступны. (конечно, требуется .typeahead.dropdown-menu { width: 100% } :D) в примерах для ajax есть 1 ошибка, showLoadingMask не работает (артефакт BS 2?), к сожалению, пока нет кеширования для запросов ;) - person 3176243; 09.01.2014

arrow_upward
0
arrow_downward

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

this.$menu.width(this.$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());
}
person lukiller    schedule 14.04.2015

arrow_upward
-2
arrow_downward

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

person Krzysztof Wilczek    schedule 31.12.2013
comment
Ссылка bootstrap-select не является заменой автозаполнения с опережением ввода. Они служат разным целям. - person Brian M. Hunt; 01.01.2014
comment
Я думаю, что это возможно, особенно при использовании второй [версии этой библиотеки (select2)]( ivaynberg.github.io/ выберите2) - person Krzysztof Wilczek; 02.01.2014