Предложения Twitter's typeahead.js не имеют стиля (без рамки, прозрачного фона и т. Д.)

182

Я использую щебетать typeahead.js 0.9.3, и, похоже, мои предложения вообще не разработаны.

Я получаю это:

ошибка типа

Вместо чего-то вроде этого: (взято со страницы примеров )

идеал печатающий

JavaScript, включающий typeahead:

$('.search-typeahead').typeahead({
    name: 'videos',
    remote: {
        url: '/api/v1/internal/videos/typeahead?text=%QUERY'
    }
});

Элемент ввода HTML:

<input type="text" value="" id="search_keywords" class="no-clear search-typeahead"/>

Дополнительные замечания:

Сайт, на котором я работаю, имеет jQuery 1.10.1 и не использует загрузчик Twitter. Есть куча CSS, которые я не писал, и поэтому я не знаю, с чем я боюсь вмешиваться, однако кажется, что плагин добавляет свои собственные стили (нет сопровождающего файла .css), поэтому теоретически не должен переопределять вещи ? Я запутался, почему мои стили работают, а добавленные плагином - нет, в результате чего появляются предложения с прозрачным фоном, без границ и т. Д.

Zugwalt
источник

Ответы:

212

Итак, изучая документы, я теперь вижу:

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

Таким образом, я решил скопировать стиль из примера, который я хотел воспроизвести:

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}
Zugwalt
источник
19
По некоторым причинам мое предложенное редактирование было отклонено, но обратите внимание, что tt-is-under-cursorкласс, кажется, был переименован в tt-cursor. Документация здесь .
Джо Фриман
6
Также есть tt-inputвместо tt-query(как для 0.10.5)
Филип Спиридонов
7
Разве не было бы лучше иметь старые версии в комментариях?
worldsayshi
3
.tt-dropdown-menu теперь является .tt-menu
bkwdesign
1
Добавьте, cursor: pointer;чтобы .tt-is-under-cursorиметь правильный курсор, который говорит пользователю, что он должен нажать.
Лоран В.
124

Таким образом, следующие стили придадут вам такой вид. Он основан на CSS, который я извлек из официального сайта примеров Typeahead.

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

CSS:

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {    /* used to be tt-dropdown-menu in older versions */
  width: 422px;
  margin-top: 4px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  line-height: 24px;
}

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

Это предполагает, что ваш вклад будет иметь form-controlкласс. Для моего примера это так:

<input class="typeahead form-control" type="text" placeholder="States of USA">
Андре Пена
источник
4
Работал на меня с одним твиком. Появляется .tt-dropdown-menuсейчас .tt-menu. Спасибо за ответ.
groundh0g
33

https://github.com/bassjobsen/typeahead.js-bootstrap-css/blob/master/typeaheadjs.css

Другие не выглядели великолепно, этот больше всего похож на Bootstrap.

Эдуардо
источник
1
Прекрасно работает с Bootstrap
Хосе Шериан
Это отлично работало без изменений в Rails 4.2 и bootstrap-sass (3.3.7) autoprefixer-rails (> = 5.2.1) sass (> = 3.3.4). Это также немного более отзывчиво, чем некоторые другие решения. Кроме того, это означает, что ваш блок ввода может иметь ширину 100%, поэтому он должен работать с большинством макетов.
rmcsharry
Хотя, если вы введете шире, чем 162 (минимальная ширина, используемая здесь), вы можете также добавить ширину: 100%; к первому разделу для tt-menu / tt-dropdown
rmcsharry
19

Typeahead изменил некоторые имена своих классов, и приведенные выше примеры теперь некорректны.

Например:

  • Вместо .tt-suggestion.tt-is-under-cursor использования.tt-suggestion:hover
  • Вместо того .tt-dropdown-menu, чтобы использовать.tt-menu

Если вы хотите позаимствовать стиль на странице примеров , вы можете увидеть их таблицу стилей здесь :

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

Вот демоверсия в стеке фрагментов

KyleMit
источник
2
Можно ли сделать так, чтобы ширина шрифта была такой маленькой?
Руна Jeppesen
13

Это код, который работает для меня:

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
    margin-bottom: 0;
}
.tt-hint {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #999;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -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);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.tt-dropdown-menu {
    min-width: 160px;
    margin-top: 2px;
    padding: 5px 0;
    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;

}
.tt-suggestion {
    display: block;
    padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #dfdfdf;
}
.tt-suggestion.tt-is-under-cursor a {
    color: #fff;
}
.tt-suggestion p {
    margin: 0;
}
Андре Пена
источник
1
Это решение работает независимо от ширины ввода. Спасибо!
скафандр
Идеально для меня работает с typeahead.js + BS3 +, доступным для данных на одном экране. Спасибо
Майк Кастро Демария
3

Поскольку у меня меньше среды с включенным BS3, я взял код Zugwalt css (поместил его в более удобочитаемую иерархию) и заполнил его стилем из выпадающего меню bs3. Это просто следование вашим (настроенным) переменным.

    .twitter-typeahead {
      display: block;
      width: 100%; //BS 3 needs this to inherit this for children

      .tt-query,
      .tt-hint {
        margin-bottom: 0;
      }

      .tt-dropdown-menu {
        z-index: @zindex-dropdown;
        min-width: 326px;
        padding: 5px 0;
        margin: 2px 0 0; // override default ul
        font-size: @font-size-base;
        text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
        background-color: @dropdown-bg;
        border: 1px solid @dropdown-fallback-border; // IE8 fallback
        border: 1px solid @dropdown-border;
        border-radius: @border-radius-base;
        .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
        background-clip: padding-box;

        .tt-suggestions {

          .tt-suggestion {
            padding: 3px 12px;
            font-weight: normal;
            line-height: @line-height-base;
            color: @dropdown-link-color;
            white-space: nowrap; // prevent links from randomly breaking onto new lines
          }

          .tt-suggestion.tt-cursor {
            color: @dropdown-link-hover-color;
            background-color: @dropdown-link-hover-bg;
          }

          .tt-suggestion p {
            margin: 0;
          }
        }
      }
    }
Пол Борманс
источник
1

Вот scssверсия, которая максимально полагается на переменные / объявления начальной загрузки. К сожалению, вы не можете расширить вложенные селекторы в sass, иначе это будет меньше:

@mixin typeahead-active() {
  // mimics  @extend .dropdown-menu > .active > a;
  color: $dropdown-link-active-color;
  text-decoration: none;
  outline: 0;
  background-color: $dropdown-link-active-bg;
}

//https://github.com/corejavascript/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names
span.twitter-typeahead {

  // this is the suggested matches dropdown
  .tt-menu {
    @extend .dropdown-menu;
  }

  .tt-hint {
    color: #999
  }

  // Added to suggestion elements.
  .tt-suggestion {

    // mimic .dropdown-menu > li > a
    padding: 3px 20px;
    line-height: $line-height-base;

    // Added to suggestion element when menu cursor moves to said suggestion.
    &.tt-cursor {
      @include typeahead-active;
    }

    // Hover/focus on suggestion
    &:hover,
    &:focus {
      @include typeahead-active;
    }

    p {
      margin: 0;
    }
  }

  .input-group & {
    display: block !important;
    .tt-dropdown-menu {
      top: 32px !important;
    }
  }
  .input-group.input-group-lg & {
    .tt-dropdown-menu {
      top: 44px !important;
    }
  }
  .input-group.input-group-sm & {
    .tt-dropdown-menu {
      top: 28px !important;
    }
  }
}
Kross
источник
1

Если вы используете Bootstrap 4, этого достаточно:

span.twitter-typeahead
  width: 100%

.tt-input
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)

.tt-menu
  @extend .list-group
  box-shadow: 0 5px 10px rgba(0,0,0,.2)
  width: 100%

.tt-suggestion
  @extend .list-group-item

.tt-selectable
  @extend .list-group-item-action
Archonic
источник
0

В моем конкретном случае это решило абсолютное позиционирование. Относительное позиционирование давило на другие элементы начальной загрузки, когда был открыт список предложений (tt-menu).

.tt-menu { 
    z-index: 2147483647;
    position: absolute;    
}

Вы можете добавить это к ответу выше https://stackoverflow.com/a/26934329/1225421

Алекс Пандреа
источник