还有其他人运行对 Twitter Typeahead 搜索栏的样式设置有问题吗？

Question

我在设计 Twitter Typeahead 搜索栏的样式时遇到了困难。添加 Typeahead javascript 似乎在我的搜索栏中添加了三个新的 classes，.twitter-typeahead、.tt-hint 和 .tt-input，每个行为都不同，很奇怪方式。

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

如果显式设置这些 classes 的属性似乎无法设置它们的样式，我不得不得出结论，还有其他我找不到的 classes 在起作用.那，或者 Typeahead 的代码中存在错误。

有没有人运行喜欢这样的东西？？有谁知道为什么三个 classes 可能不响应 css？我已经无计可施了。

Answer 1

您的 css 被覆盖的原因是 Typeahead.js 使用 javascript 添加 css 并更改样式。由于所有这些都是在您的 css 加载到页面之后发生的，因此它具有优先权并且会打乱您已经完成的工作。

我注意到您正在使用 Bootstrap。检查 https://github.com/twitter/typeahead.js/issues/378 前一段时间打开的这个问题，它可以帮助您在使用 bootstrap 框架时提前输入样式。 Jharding（维护 typeahead 的人）确实提到了一些有趣的事情 link 不过：

Someone asks: "@jharding If you have no interest in writing “an official Bootstrap library” how about re-factoring it so the CSS is actually controllable by users without resorting to using the !important keyword, and let them decide if they want Bootstrap styles or not."

@jharding: Will be possible in v0.11.

看来您必须等待更新版本的 Typeaway 才能更自由地设置样式。

Answer 2

尝试使用下面的 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($("<li />", {
        "class":"results-" + index,
        "html":value
      }))
    })
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" id="typeahead" /><br />
<div id="results">
  <ul>
  </ul>
</div>

还有其他人运行对 Twitter Typeahead 搜索栏的样式设置有问题吗？

Has anyone else run into problems styling Twitter Typeahead's searchbar?

javascript

ruby

ruby-on-rails

twitter-bootstrap

bootstrap-typeahead

还有其他人 运行 对 Twitter Typeahead 搜索栏的样式设置有问题吗？

Has anyone else run into problems styling Twitter Typeahead's searchbar?

javascript

ruby

ruby-on-rails

twitter-bootstrap

bootstrap-typeahead

还有其他人运行对 Twitter Typeahead 搜索栏的样式设置有问题吗？