javascript - suggestion - Las sugerencias de typeahead.js de Twitter no tienen un estilo(no tienen borde, fondo transparente, etc.)
typeahead states (7)
Estoy usando twitter''s typeahead.js 0.9.3 y parece que mis sugerencias no tienen ningún estilo.
Estoy obteniendo esto:
En lugar de algo así: (tomado de la página de ejemplos )
JavaScript habilitando typeahead:
$(''.search-typeahead'').typeahead({
name: ''videos'',
remote: {
url: ''/api/v1/internal/videos/typeahead?text=%QUERY''
}
});
Elemento de entrada de HTML:
<input type="text" value="" id="search_keywords" class="no-clear search-typeahead"/>
Notas adicionales:
El sitio en el que estoy trabajando tiene jQuery 1.10.1 y no usa twitter bootstrap. Hay un montón de CSS que no escribí y por lo tanto no estoy familiarizado con lo que me temo que interfiere, sin embargo, parece que el complemento agrega sus propios estilos (no hay un archivo .css adjunto) por lo que no debería anular teóricamente las cosas ? Estoy confundido sobre por qué funcionan mis estilos, pero los añadidos por el complemento no, lo que resulta en una sugerencia con fondos transparentes, sin bordes, etc.
Aquí hay una versión de scss que se basa en las variables / declaraciones bootstrap tanto como sea posible. Lamentablemente, no puede ampliar los selectores anidados en sass, de lo contrario sería más pequeño:
@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;
}
}
}
Como tengo menos ambiente con BS3 incluido, tomé el código de Zugwalt css (lo puse en una jerarquía más legible) y lo llené con el estilo del menú desplegable de bs3. Simplemente sigue tus variables (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;
}
}
}
}
Entonces, miro los docs que ahora veo:
De forma predeterminada, el menú desplegable creado por typeahead.js se verá feo y querrá darle un estilo para asegurarse de que se ajuste al tema de su página web.
Mi solución fue copiar el estilo del ejemplo que deseaba 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;
}
Este es el código que funciona para mí:
.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;
}
Por lo tanto, los siguientes estilos le darán esta apariencia. Se basa en el CSS que extraje del sitio web oficial de ejemplos 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;
}
Esto supone que su entrada tendrá la clase de form-control . Para mi ejemplo, es así:
<input class="typeahead form-control" type="text" placeholder="States of USA">
Typeahead ha cambiado algunos de sus nombres de clase y los ejemplos anteriores ahora son incorrectos.
Por ejemplo:
- En lugar de
.tt-suggestion.tt-is-under-cursoruse.tt-suggestion:hover - En lugar de
.tt-dropdown-menu, use.tt-menu
Si desea tomar prestado el estilo de la página de ejemplos , puede ver su hoja de estilo aquí :
.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;
}
Aquí hay una demostración en Stack Snippets
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, ''i'');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var states = [''Alabama'', ''Alaska'', ''Arizona'', ''Arkansas'', ''California'',
''Colorado'', ''Connecticut'', ''Delaware'', ''Florida'', ''Georgia'', ''Hawaii'',
''Idaho'', ''Illinois'', ''Indiana'', ''Iowa'', ''Kansas'', ''Kentucky'', ''Louisiana'',
''Maine'', ''Maryland'', ''Massachusetts'', ''Michigan'', ''Minnesota'',
''Mississippi'', ''Missouri'', ''Montana'', ''Nebraska'', ''Nevada'', ''New Hampshire'',
''New Jersey'', ''New Mexico'', ''New York'', ''North Carolina'', ''North Dakota'',
''Ohio'', ''Oklahoma'', ''Oregon'', ''Pennsylvania'', ''Rhode Island'',
''South Carolina'', ''South Dakota'', ''Tennessee'', ''Texas'', ''Utah'', ''Vermont'',
''Virginia'', ''Washington'', ''West Virginia'', ''Wisconsin'', ''Wyoming''
];
$(''.typeahead'').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: ''states'',
source: substringMatcher(states)
});
.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;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.js"></script>
<div class="container" >
<input class="typeahead form-control" type="text" placeholder="States of USA" />
</div>
https://github.com/bassjobsen/typeahead.js-bootstrap-css/blob/master/typeaheadjs.css
Los otros no se ven bien, este se parece más a Bootstrap.