有没有人在设计Twitter Typeahead的搜索栏时遇到问题？

Question

我在设计Twitter Typeahead的搜索栏时遇到了难以置信的困难。添加Typeahead javascript似乎在我的搜索栏中添加了三个新类，.twitter-typeahead、.tt-hint和.tt-input，它们的行为方式各不相同。

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

如果显式设置这些类的属性似乎无法对它们进行样式化，那么我不得不得出结论，还有其他类在发挥作用，我找不到。或者Typeahead的代码中有一个错误。

有人遇到过这样的事吗？？有人知道为什么这三个类可能没有响应css吗？我已经无计可施了。

Answer 1

您的css被覆盖的原因是因为Typeahead.js使用javascript添加css并更改样式。由于所有这些都是在css加载到页面后发生的，所以它占据了优先权，并将您已经做的事情搞砸了。

我注意到你正在使用Bootstrap。检查已打开的此问题https://github.com/twitter/typeahead.js/issues/378前一段时间，它可以帮助您在使用引导程序框架的同时进行typeahead样式设计。Jharding（维护typeahead的人）确实在这个链接中提到了一些有趣的东西：

有人问："@jharding如果你对写作没有兴趣"官方引导库"如何重新分解它，使CSS实际上是可控的用户无需使用！重要关键字，并让他们决定是否想要Bootstrap风格。"

@jharding：将在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>