Les suggestions de typeahead.js de Twitter ne sont pas stylisées (pas de bordure, fond transparent, etc.).

Question

J'utilise l'application Twitter typeahead.js 0.9.3 et il semble que mes suggestions ne soient pas du tout stylisées.

Je reçois ça :

Au lieu de quelque chose comme ça : (extrait de page d'exemples )

JavaScript permettant le typeahead :

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

Élément de saisie HTML :

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

Notes supplémentaires :

Le site sur lequel je travaille utilise jQuery 1.10.1 et n'utilise pas twitter bootstrap. Il y a un tas de CSS que je n'ai pas écrit et avec lesquels je ne suis donc pas familier, et je crains qu'ils interfèrent, mais il semble que le plugin ajoute ses propres styles (il n'y a pas de fichier .css associé), donc il ne devrait pas théoriquement remplacer les choses ? Je ne comprends pas pourquoi mes styles fonctionnent, mais pas ceux ajoutés par le plugin, ce qui donne des suggestions avec des arrière-plans transparents, sans bordures, etc.

Answer 1

Donc, en regardant dans le docs Je vois maintenant :

Par défaut, le menu déroulant créé par typeahead.js sera laid. laid et vous devrez le styliser pour vous assurer qu'il s'intègre bien au thème de votre votre page Web.

Ma solution a donc été de copier le style de l'exemple que je souhaitais reproduire :

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

Answer 2

Ainsi, les styles suivants vous donneront ce look & feel. Ils sont basés sur le CSS que j'ai extrait du site officiel d'exemples de 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;
}

Cela suppose que votre entrée aura le form-control classe. Pour mon exemple, c'est comme ça :

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

Answer 3

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

Les autres n'avaient pas l'air très bien, celui-ci ressemble plus à Bootstrap.

Answer 4

Voici le code qui fonctionne pour moi :

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

Answer 5

Merci beaucoup pour ça, Zugwalt et Andre. Pour que la couleur d'arrière-plan du survol/sélection s'affiche dans la dernière version de typeahead, il suffit de remplacer ".tt-suggestion.tt-is-under-cursor" par "tt-suggestion.tt-cursor" dans le CSS.