As sugestões typeahead.js do Twitter não têm estilo (não possuem borda, plano de fundo transparente etc.)


182

Estou usando o typeahead.js 0.9.3 do twitter e parece que minhas sugestões não têm estilo.

Estou entendendo isso:

erro tipográfico

Em vez de algo como isto: (retirado da página de exemplos )

cabeça de impressão ideal

JavaScript habilitando typeahead:

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

Elemento de entrada HTML:

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

Notas Adicionais:

O site em que estou trabalhando tem o jQuery 1.10.1 e não usa o twitter bootstrap. Há um monte de CSS que eu não escrevi e, portanto, não estou familiarizado com o que receio estar interferindo, no entanto, parece que o plug-in adiciona seus próprios estilos (não há arquivo .css), portanto, isso não deveria substituir teoricamente as coisas ? Estou confuso por que meus estilos funcionam, mas os adicionados pelo plugin não, resultando em sugestões com fundos transparentes, sem bordas etc.

Respostas:


212

Então, olhando para os documentos , agora vejo:

Por padrão, o menu suspenso criado pelo typeahead.js ficará feio e você precisará estilizá-lo para garantir que ele se encaixe no tema da sua página da web.

Minha solução foi copiar o estilo do exemplo que eu queria replicar:

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

19
Por alguma razão, minha edição sugerida foi rejeitada, mas observe que a tt-is-under-cursorclasse parece ter sido renomeada para tt-cursor. Documentação aqui .
Joe Freeman

6
Há também um tt-inputem vez do tt-query(como para 0.10.5)
Filip Spiridonov

7
Não seria melhor ter as versões antigas nos comentários?
Worldsayshi #

3
.tt-dropdown-menu é agora .tt-menu
bkwdesign

1
Adicione cursor: pointer;a .tt-is-under-cursorpara ter um cursor adequado que informe ao usuário que ele precisa clicar.
Laurent W.

124

Portanto, os seguintes estilos fornecerão essa aparência. É baseado no CSS que extraí do site oficial de exemplos do Typeahead.

insira a descrição da imagem aqui

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

Isso pressupõe que sua entrada terá a form-controlclasse Para o meu exemplo, é assim:

<input class="typeahead form-control" type="text" placeholder="States of USA">

4
Trabalhou para mim com um ajuste. Aparece .tt-dropdown-menuagora .tt-menu. Obrigado pela resposta.
groundh0g

33

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

Os outros não ficaram ótimos, esse parece mais com o Bootstrap.


1
Funciona muito bem com Bootstrap
Jose Cherian

Isso funcionou perfeitamente, sem alterações no Rails 4.2 e no bootstrap-sass (3.3.7) autoprefixer-rails (> = 5.2.1) sass (> = 3.3.4). Também é um pouco mais amigável que algumas das outras soluções. Além disso, significa que sua caixa de entrada pode ter largura de 100%, portanto deve funcionar com a maioria dos layouts.
Rmcsharry

Embora se a entrada for maior que 162 (a largura mínima usada aqui), convém adicionar a largura: 100%; para a primeira seção do menu tt / tt-suspenso
rmcsharry

19

O Typeahead alterou alguns nomes de classes e os exemplos acima agora estão incorretos.

Por exemplo:

  • Em vez de .tt-suggestion.tt-is-under-cursor usar.tt-suggestion:hover
  • Em vez de .tt-dropdown-menu, use.tt-menu

Se você quiser emprestar o estilo da página de exemplos , poderá ver a folha de estilos aqui :

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

Aqui está uma demonstração nos snippets de pilha


2
É possível evitar que o cabeçote de impressão diminua a largura?
Rune Jeppesen

13

Este é o código que funciona para mim:

.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
Esta solução funciona independentemente da largura da entrada. Obrigado!
spacesuitdiver

Trabalho perfeito para mim com typeahead.js + BS3 + datatable na mesma tela. Obrigado
Mike Castro Demaria

3

Como eu tenho um ambiente menos com o BS3 incluído, peguei o código CSS do Zugwalt (coloquei em uma hierarquia mais legível) e o preenchi com estilo no menu suspenso do bs3. É simplesmente seguir suas variáveis ​​(personalizadas).

    .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

Aqui está uma scssversão que se baseia nas variáveis ​​/ declarações de inicialização, tanto quanto possível. Infelizmente você não pode estender seletores aninhados no sass, caso contrário, seria menor:

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

1

Se você estiver usando o Bootstrap 4, basta fazer o seguinte:

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

0

No meu caso particular, o posicionamento absoluto o resolveu. O posicionamento relativo estava pressionando outros elementos de inicialização quando a lista de sugestões (menu tt) foi aberta.

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

Você pode adicionar isso à resposta acima https://stackoverflow.com/a/26934329/1225421

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.