Twitter的typeahead.js建议没有样式(没有边框,透明背景等)。

186

我正在使用 Twitter 的 typeahead.js 0.9.3,但是似乎我的建议没有任何样式。

我得到了这个:

typeahead bug

而不是像这样:(来自示例页面

typehead ideal

启用 typeahead 的 JavaScript:

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

HTML 输入元素:

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

附加说明:

我正在处理的网站使用的是jQuery 1.10.1,并且没有使用twitter bootstrap。有一堆CSS样式表我没有编写过,也不熟悉其中的内容,我担心这些样式会造成干扰。但是插件应该会添加自己的样式(没有附带任何.css文件),所以它理论上应该能覆盖掉其他的样式,但我很困惑为什么我的样式可以正常工作,而插件添加的却不能,导致建议显示为透明背景、无边框等。

11个回答

0
在我的情况下,绝对定位解决了这个问题。当建议列表(tt-menu)打开时,相对定位会推动其他引导元素向下。
.tt-menu { 
    z-index: 2147483647;
    position: absolute;    
}

你可以将此内容添加到上面的答案中https://dev59.com/aWIj5IYBdhLWcg3wflMy#26934329


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接