Sugestie Twittera typeahead.js nie są stylizowane (nie mają obramowania, przezroczystego tła itp.)

182

Używam twittera typeahead.js 0.9.3 i wygląda na to, że moje sugestie wcale nie są stylizowane.

Dostaję to:

błąd typowy

Zamiast czegoś takiego: (wzięty ze strony przykładów )

idealna głowica do pisania

JavaScript włącza typeahead:

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

Element wejściowy HTML:

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

Dodatkowe uwagi:

Witryna, nad którą pracuję, ma jQuery 1.10.1 i nie używa twitterowego bootstrapu. Jest kilka plików CSS, których nie napisałem i dlatego nie jestem zaznajomiony z czym, obawiam się, że przeszkadzają, ale wygląda na to, że wtyczka dodaje własne style (nie ma dołączonego pliku .css), więc nie powinna teoretycznie zastępować rzeczy ? Jestem zdezorientowany, dlaczego moje style działają, ale te dodane przez wtyczkę nie działają, co powoduje sugestie z przezroczystym tłem, bez granic itp.

Zugwalt
źródło

Odpowiedzi:

212

Więc patrząc na dokumenty, które teraz widzę:

Domyślnie menu rozwijane utworzone przez typeahead.js będzie wyglądać brzydko i będziesz chciał je stylizować, aby pasowało do motywu twojej strony.

Moim rozwiązaniem było więc skopiowanie stylu z przykładu, który chciałem powielić:

.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
źródło
19
Z jakiegoś powodu moja sugerowana edycja została odrzucona, ale zauważ, że tt-is-under-cursornazwa klasy została zmieniona na tt-cursor. Dokumentacja tutaj .
Joe Freeman
6
Istnieje również tt-inputzamiast tt-query(jak w 0.10.5)
Filip Spiridonov
7
Czy nie lepiej byłoby mieć stare wersje w komentarzach?
worldsayshi
3
.tt-rozwijane menu jest teraz .tt-menu
bkwdesign
1
Dodaj, cursor: pointer;aby .tt-is-under-cursormieć odpowiedni kursor, który mówi użytkownikowi, że musi kliknąć.
Laurent W.,
124

Poniższe style nadadzą Ci ten wygląd. Opiera się na CSS wyodrębnionym z oficjalnej witryny przykładów Typeahead.

wprowadź opis zdjęcia tutaj

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

Zakłada się, że twój wkład będzie miał form-controlklasę. W moim przykładzie wygląda to tak:

<input class="typeahead form-control" type="text" placeholder="States of USA">
André Pena
źródło
4
Pracowałem dla mnie z jednym ulepszeniem. Pojawia .tt-dropdown-menusię teraz .tt-menu. Dziękuję za odpowiedź.
groundh0g
33

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

Pozostałe nie wyglądały świetnie, ten najbardziej przypomina Bootstrap.

Eduardo
źródło
1
Działa świetnie z Bootstrap
Jose Cherian
Działa to idealnie bez żadnych zmian w Rails 4.2 i bootstrap-sass (3.3.7) autoprefixer-rails (> = 5.2.1) sass (> = 3.3.4) Jest również bardziej responsywny niż niektóre inne rozwiązania. Dodatkowo oznacza to, że pole wprowadzania może mieć szerokość 100%, więc powinno działać z większością układów.
rmcsharry
Chociaż jeśli wprowadzane dane są szersze niż 162 (zastosowana tutaj minimalna szerokość), możesz również dodać szerokość: 100%; do pierwszej sekcji menu tt / tt-dropdown
rmcsharry
19

Typeahead zmienił niektóre nazwy swoich klas, a powyższe przykłady są teraz niepoprawne.

Na przykład:

  • Zamiast .tt-suggestion.tt-is-under-cursor używać.tt-suggestion:hover
  • Zamiast .tt-dropdown-menu, stosowanie.tt-menu

Jeśli chcesz pożyczyć styl ze strony przykładów , możesz zobaczyć ich arkusz stylów tutaj :

.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;
}

Oto wersja demonstracyjna stosu

KyleMit
źródło
2
Czy można zapobiec takiemu zmniejszeniu szerokości przez TypeAhead?
Rune Jeppesen
13

Oto kod, który działa dla mnie:

.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;
}
André Pena
źródło
1
To rozwiązanie działa bez względu na szerokość wejścia. Dzięki!
skafander kosmiczny
Działa idealnie dla mnie z typahead.js + BS3 + datatable na tym samym ekranie. Dzięki
Mike Castro Demaria,
3

Ponieważ mam mniej środowiska z dołączonym BS3, wziąłem kod css Zugwalt (umieściłem go w bardziej czytelnej hierarchii) i wypełniłem go stylem z rozwijanego menu bs3. Po prostu podąża za (dostosowanymi) zmiennymi.

    .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;
          }
        }
      }
    }
Paul Bormans
źródło
1

Oto scsswersja, która w jak największym stopniu opiera się na zmiennych / deklaracjach bootstrap. Niestety nie można rozszerzyć zagnieżdżonych selektorów w sass, w przeciwnym razie byłby mniejszy:

@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
źródło
1

Jeśli używasz Bootstrap 4, wystarczy to zrobić:

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
źródło
0

W moim szczególnym przypadku rozwiązało to pozycjonowanie bezwzględne. Względne pozycjonowanie wypychało inne elementy ładowania początkowego, gdy lista sugestii (menu tt) była otwarta.

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

Możesz dodać to do powyższej odpowiedzi https://stackoverflow.com/a/26934329/1225421

Alex Pandrea
źródło