Проблема с CSS на Twitter Typeahead с Bootstrap 3

С выпуском Bootstrap 3. Typeahead был удален в пользу этого:
https://github.com/twitter/typeahead.js

Ive успешно интегрировал его в удаленный выбор данных

но у меня проблема с автозаполнением

введите описание изображения здесь

как вы можете видеть, есть два текста, появляющихся в текстовом поле.

Я включил css ( https://github.com/jharding/typeahead.js-bootstrap.css ), как сказано в документации, но не повезло.

любая помощь или предложение будут оценены.

jsfiddle, показывающий проблему:
http://jsfiddle.net/KrtB5/

HTML

 

Javascript :

 $('.typeahead').typeahead({ name: 'Some name', local: ['test', 'abc', 'def'] }) 

    EDIT: обновлено для Bootstrap 3.0 EDIT 2: вызов Typeahead был изменен. Просмотреть новый jsfiddle

    После того, как вы играете со стилем, похоже, что class управления формой не совсем соответствует тит-подсказке. Поэтому я убедился, что границы и границы выстраиваются в линию. Принимая ответ Хиэ Нгуена и добавляя пограничный радиус и поддержку ввода-малого / большого ввода

    CSS

     .twitter-typeahead .tt-hint { display: block; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; border: 1px solid transparent; border-radius:4px; } .twitter-typeahead .hint-small { height: 30px; padding: 5px 10px; font-size: 12px; border-radius: 3px; line-height: 1.5; } .twitter-typeahead .hint-large { height: 45px; padding: 10px 16px; font-size: 18px; border-radius: 6px; line-height: 1.33; } 

    Скрипт для ввода-малый / большой вход

     $('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small'); $('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large'); и $('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small'); $('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large'); 

    Обновлен jsfiddle: http://jsfiddle.net/KrtB5/542/

    Хм, похоже, что .form-control – это новый class в Bootstrap 3 RC, и это является виновником этой проблемы (без сомнения, это только версия RC со многими проблемами), вы можете просто скопировать стиль этого classа в class .tt-hint , Так:

     .twitter-typeahead .tt-hint { display: block; height: 38px; padding: 8px 12px; font-size: 14px; line-height: 1.428571429; border: 1px solid transparent; } 

    Рабочая скрипка: http://jsfiddle.net/KrtB5/2/

    Обновление, которое лучше работает с jQuery 1.9.1 и Bootstrap 3.0.0: http://jsfiddle.net/KrtB5/13

    Проверь это:

     $('#foo').typeahead(...); $('.tt-hint').addClass('form-control'); 

    Существует также неофициальный порт плагина Bootstrap 2:

    Bootstrap 3 Typeahead

    Bootstrap 3 Typeahead

    Он не требует дополнительного CSS и работает с последней версией Bootstrap.

    Вот демонстрация на Plunker.

    Не только .tt-hint – brocken, но и другие css-classы.

    Лучшим решением, работающим во всех браузерах, является добавление дополнительного css, который восстанавливает проблемы css между Typeahead.js и Bootstrap 3:

    https://github.com/jharding/typeahead.js-bootstrap.css

    Если вы используете bootstrap.less, вам это намного проще. BS 3 устанавливает LESS 1.4.1, который теперь включает в себя «продлить» доброту. см. Less и Bootstrap: как использовать class span3 (или spanX [any number]) как mixin?

    Расширение – это функция killer для LESS сейчас. Теперь вы можете полностью наследовать (явно названные) classы. Так что нет необходимости копировать свойства, как в ответах CSS Hieu Nguyen и Nick P. LESS будет делать все это с:

     .twitter-typeahead .tt-hint:extend(.form-control all) {} 

    https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less меньше кода нарушен для BS 3. Я использовал его в качестве отправной точки, а также добавил создание выпадающее меню, а не перенос слов в соответствии с базовым classом BS 2. Мой последний файл меньше:

     .tt-dropdown-menu { min-width: 160px; margin-top: 2px; padding: 5px 0; /* from BS dropdowns.less .dropdown-menu */ /* background-color: @dropdownBackground;*/ background-color: @dropdown-bg; /* border: 1px solid #ccc; border: 1px solid @dropdownBorder; border: 1px solid @dropdownBorder;*/ border: 1px solid @dropdown-fallback-border; // IE8 fallback border: 1px solid @dropdown-border; *border-right-width: 2px; *border-bottom-width: 2px; /*BS2 replaced with BS dropdowns.less .dropdown-menu*/ /*.border-radius(6px);*/ border-radius: 6px; /*.box-shadow(0 5px 10px rgba(0,0,0,.2)); -webkit-background-clip: padding-box; -moz-background-clip: padding;*/ .box-shadow(0 6px 12px rgba(0,0,0,.175)); background-clip: padding-box; } .tt-suggestion { display: block; padding: 3px 20px; } .tt-suggestion.tt-is-under-cursor { /*color: @dropdownLinkColorHover; #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));*/ color: @dropdown-link-hover-color; background-color: @dropdown-link-hover-bg; } .tt-suggestion.tt-is-under-cursor a { /*color: @dropdownBackground;*/ color: @dropdown-bg; } .tt-suggestion > p { margin: 0; white-space: nowrap !important; //dont conform suggestion to parent input width } /*https://stackoverflow.com/questions/18059161/css-issue-on-twitter-typeahead-with-bootstrap-3*/ .twitter-typeahead { display: block; width: 100%; //BS 3 needs this to inherit this for children } .twitter-typeahead .tt-hint:extend(.form-control all) { color: @input-color-placeholder; //show hint distinct from input } 

    Комплексное решение (рекомендуется в этом отчете об ошибке в Typeahead)

    https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.css

     /* * typehead.js-bootstrap3.less * @version 0.2.3 * https://github.com/hyspace/typeahead.js-bootstrap3.less * * Licensed under the MIT license: * http://www.opensource.org/licenses/MIT */ .has-warning .twitter-typeahead .tt-input, .has-warning .twitter-typeahead .tt-hint { border-color: #8a6d3b; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-warning .twitter-typeahead .tt-input:focus, .has-warning .twitter-typeahead .tt-hint:focus { border-color: #66512c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; } .has-error .twitter-typeahead .tt-input, .has-error .twitter-typeahead .tt-hint { border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-error .twitter-typeahead .tt-input:focus, .has-error .twitter-typeahead .tt-hint:focus { border-color: #843534; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; } .has-success .twitter-typeahead .tt-input, .has-success .twitter-typeahead .tt-hint { border-color: #3c763d; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-success .twitter-typeahead .tt-input:focus, .has-success .twitter-typeahead .tt-hint:focus { border-color: #2b542c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; } .input-group .twitter-typeahead:first-child .tt-input, .input-group .twitter-typeahead:first-child .tt-hint { border-bottom-left-radius: 4px; border-top-left-radius: 4px; } .input-group .twitter-typeahead:last-child .tt-input, .input-group .twitter-typeahead:last-child .tt-hint { border-bottom-right-radius: 4px; border-top-right-radius: 4px; } .input-group.input-group-sm .twitter-typeahead .tt-input, .input-group.input-group-sm .twitter-typeahead .tt-hint { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } select.input-group.input-group-sm .twitter-typeahead .tt-input, select.input-group.input-group-sm .twitter-typeahead .tt-hint { height: 30px; line-height: 30px; } textarea.input-group.input-group-sm .twitter-typeahead .tt-input, textarea.input-group.input-group-sm .twitter-typeahead .tt-hint, select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input, select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint { height: auto; } .input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, .input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { border-radius: 0; } .input-group.input-group-sm .twitter-typeahead:first-child .tt-input, .input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { border-bottom-left-radius: 3px; border-top-left-radius: 3px; border-bottom-right-radius: 0; border-top-right-radius: 0; } .input-group.input-group-sm .twitter-typeahead:last-child .tt-input, .input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { border-bottom-left-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 3px; border-top-right-radius: 3px; } .input-group.input-group-lg .twitter-typeahead .tt-input, .input-group.input-group-lg .twitter-typeahead .tt-hint { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } select.input-group.input-group-lg .twitter-typeahead .tt-input, select.input-group.input-group-lg .twitter-typeahead .tt-hint { height: 46px; line-height: 46px; } textarea.input-group.input-group-lg .twitter-typeahead .tt-input, textarea.input-group.input-group-lg .twitter-typeahead .tt-hint, select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input, select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint { height: auto; } .input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, .input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { border-radius: 0; } .input-group.input-group-lg .twitter-typeahead:first-child .tt-input, .input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { border-bottom-left-radius: 6px; border-top-left-radius: 6px; border-bottom-right-radius: 0; border-top-right-radius: 0; } .input-group.input-group-lg .twitter-typeahead:last-child .tt-input, .input-group.input-group-lg .twitter-typeahead:last-child .tt-hint { border-bottom-left-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 6px; border-top-right-radius: 6px; } .twitter-typeahead { width: 100%; } .input-group .twitter-typeahead { display: table-cell !important; float: left; } .twitter-typeahead .tt-hint { color: #999999; } .twitter-typeahead .tt-input { z-index: 2; } .twitter-typeahead .tt-input[disabled], .twitter-typeahead .tt-input[readonly], fieldset[disabled] .twitter-typeahead .tt-input { cursor: not-allowed; background-color: #eeeeee !important; } .tt-dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 160px; width: 100%; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; background-color: #ffffff; border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; } .tt-dropdown-menu .tt-suggestion { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333333; white-space: nowrap; } .tt-dropdown-menu .tt-suggestion.tt-cursor { text-decoration: none; outline: 0; background-color: #f5f5f5; color: #262626; } .tt-dropdown-menu .tt-suggestion.tt-cursor a { color: #262626; } .tt-dropdown-menu .tt-suggestion p { margin: 0; } 

    Это сработало для меня. Возможно, вам придется играть с верхним и левым номерами, чтобы все было правильно.

     $('#typeahead').typeahead(...); $(".tt-hint").css('top','3px'); $(".tt-hint").css('left','1px'); 

    Основываясь на ответе Андреаса, я бы поставил на следующее:

     .tt-hint { .form-control; } 

    Решение, с которым я столкнулся, состояло в том, чтобы просто добавить еще один class CSS (from-group-lg) в элемент моей группы форм.

    Мой HTML:

     

    В моем файле scss я добавил:

     .form-group-lg .tt-hint { @extend .input-lg; } 

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

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

    Очистить Менее решение

     .tt-small { .twitter-typeahead { display: block !important; // Note: Override inline styles set by JavaScript &> .tt-hint { &:extend(.form-control); color: @medium-gray; } } } 

    Где разметка выглядит примерно так:

     

    Другой подход, чтобы заставить Twitter Typeahead работать с Bootstrap 3.

     // Using jQuery, we remove the inline styles compulsively added by Twitter Typeahead. // We need to do this because, if not, styles on our stylesheets won't be able to // override those inline styles. $('.twitter-typeahead, .typeahead').attr('style',''); 

    Затем в вашей таблице стилей LESS вы можете добавить следующее:

     // Twitter Typeahead .twitter-typeahead { position: relative; .tt-hint { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: @input-bg; border: none; } .tt-input { position: relative; vertical-align: top; } .tt-hint + .tt-input { background-color: transparent; } .tt-dropdown-menu { &:extend(.dropdown-menu all); } .tt-suggestion { &:extend(.dropdown-menu > li > a all); p { margin-bottom: 0; } } .tt-cursor { &:extend(.dropdown-menu > .active > a all); } } 

    Не нужно проходить через любую из этих сложных реализаций, просто добавьте

     style="position: relative" 

    К родительскому элементу. Он использует абсолютное позиционирование, он просто должен знать, что «абсолютный» вы имеете в виду.

    Давайте будем гением компьютера.