有没有其他人遇到问题造型Twitter Typeahead的搜索栏？

我正在为Twitter Typeahead的搜索栏设计难度。 添加Typeahead javascript似乎在我的搜索栏中添加了三个新类， .twitter-typeahead .tt-hint ， .tt-hint和.tt-input ，每个类都以不同的奇怪方式运行。

首先，在我添加Typeahead之后，搜索栏的背景设置为透明，即使我已将其设置为具有不同类的白色，因此我必须添加一个白色背景包装器，其中包含所有三个新类。 给.typeahead width: 100%; height:100%; border-radius: 20px; width: 100%; height:100%; border-radius: 20px; 它适合包装纸的边框半径和高度，但它比包装纸短约50px。 .tt-input完美地适合高度和宽度，但显然是使背景透明，因为.tt-input和.twitter-typeahead之间约50px的差异是背景的颜色，而不是白色包装。 最后， .tt-hint只服从颜色。 它是白色的，但是当我尝试设置边框半径，高度或宽度时它没有响应。

如果明确设置这些类的属性似乎不适合它们的样式，我必须得出结论，还有其他正在播放的类我找不到。 那，或者Typeahead的代码中有一个错误。

有没有人碰到这样的事情？ 有谁知道为什么这三个类可能没有响应css？ 我的智慧结束了。

你的css被覆盖的原因是因为Typeahead.js使用javascript来添加css并更改样式。 因为在你的css被加载到页面之后发生了所有这一切，所以它优先并且搞砸了你已经做过的事情。

我注意到你正在使用Bootstrap。 检查这个问题已经打开了https://github.com/twitter/typeahead.js/issues/378 ，这有助于您在使用引导程序框架时进入样式类型。 Jharding（维护类型的人）确实在该链接中提到了一些有趣的东西：

有人问：“@jharding如果你没有兴趣写一个”正式的Bootstrap库“那么如何重新分解它，这样CSS实际上可以被用户控制而不需要使用！important关键字，让他们决定是否需要Bootstrap风格与否。“

@jharding：在v0.11中是可能的。

所以看起来你必须等待更新版本的Typeaway来更自由地设计它。

尝试使用下面的typeahead.js substringMatcher函数的最小调整版本; 仅将所需的css应用于input元素 

 var substringMatcher = function(strs, q, cb) { return (function(q, cb, name) { var matches, substrRegex; // 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)) { // the typeahead jQuery plugin expects suggestions to a // JavaScript object, refer to typeahead docs for more info matches.push(name(str)); } }); cb(matches); }(q, cb, function(res){return res})); }; 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").on("input", function(e) { substringMatcher(states, e.target.value, function(results) { $("#results ul").empty(); $.map(results, function(value, index) { $("#results ul") .append($("
  • ", { "class":"results-" + index, "html":value })) }) }) });
    Interesting Posts