Twitter的typeahead.js建议没有样式（没有边框，透明背景等） [英] Twitter's typeahead.js suggestions are not styled (have no border, transparent background, etc.)

问题描述

我使用Twitter的我现在可以看到：

默认情况下，由typeahead.js创建的下拉菜单将看起来
丑陋，你需要对它进行风格化，以确保它符合$ b的主题$ b您的网页。

我的解决方案是从我想复制的示例复制样式：

  .tt-query，/ * UPDATE：新版本使用tt-input代替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：新版本使用tt-input代替tt-query * / 
 box-shadow：inset 0 1px 1px rgba ，0,0,0.075）; 
} 
 
 .tt-hint {
 color：＃999; 
} 
 
 .tt-menu {/ * UPDATE：较新版本使用tt-menu而不是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：新版本使用.tt-suggestion.tt-cursor * / 
 color： fff; 
 background-color：＃0097cf; 
 
} 
 
 .tt-建议p {
 margin：0; 
} 
  

I'm using twitter's typeahead.js 0.9.3 and it seems my suggestions are not styled at all.

I'm getting this:

Instead of something like this: (taken from examples page)

JavaScript enabling typeahead:

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

HTML input element:

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

Additional Notes:

The site I'm working on has jQuery 1.10.1 and does not use twitter bootstrap. There is a bunch of CSS that I didn't write and thus am not familiar with which I fear is interfering, however it seems the plugin adds its own styles (there is no accompanying .css file) so shouldn't it theoretically override things? I'm confused why my styles work, but those added by the plugin do not, resulting in an suggestions with transparent backgrounds, no borders, etc.

解决方案

So looking into the docs I now see:

By default, the dropdown menu created by typeahead.js is going to look ugly and you'll want to style it to ensure it fits into the theme of your web page.

My solution was thus to copy the styling from the example I wished to replicate:

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

这篇关于Twitter的typeahead.js建议没有样式（没有边框，透明背景等）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！