Смешивание Typeahead.js и Bootstrap 3

У меня есть приложение, которое использует Bootstrap 3 и Typeahead. По какой-то причине, как только я добавлю Typeahead.js, стиль будет искажен, вы можете увидеть этот JSFiddle. Следующий HTML выглядит отлично:

<div class="container" style="padding:3rem;">
<form class="form-horizontal">
  <div class="form-group">
    <div class="input-group">
      <input type="search" class="form-control" id="myQuery">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="searchIndexButton">Item 1</span> <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </div>
    </div>                            
  </div>
</form>                    
</div>

Как только я инициализирую его с помощью Typeahead, как показано ниже, он выглядит ужасно.

$(function() {
  var data = [
    { id:1, name:'Tiger' },
    { id:2, name:'Bear' }
  ];

  var bh = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: data
  });

  $('#myQuery').typeahead(null, {
    minLength: 1,
    name: 'suggestions',
    source: bh,
    display: 'name'
  });
});

Ответ 1

Если вы включите этот код CSS для использования typeahead.js с Bootstrap 3, HTML будет выглядеть так, как ожидалось без изменений:

JSFiddle: https://jsfiddle.net/2j94perk/

Твиттер typeahead не работает напрямую с Bootstrap 3. Структура DOM выпадающего меню, используемого typeahead.js, отличается от структуры DOM в раскрывающемся меню Bootstrap. Вам нужно загрузить некоторый дополнительный CSS, чтобы получить раскрывающееся меню typeahead.js, чтобы соответствовать теме Bootstrap по умолчанию. Вы можете загрузить базовый CSS здесь или использовать файл LESS для его интеграции в свой проект.

Включите CSS файл после Bootstrap CSS в свой HTML:

<link href="bootstrap-3.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="typeaheadjs.css" rel="stylesheet">

Источник: https://github.com/bassjobsen/typeahead.js-bootstrap-css

Ответ 2

Если вы проверили DOM с инициализацией typeahead, вы должны заметить, что script обертывает <input> с помощью <span>. Bootstrap ожидает некоторую структуру, которая уже не работает при запуске typeahead.