是否还有其他人在Twitter搜索栏的样式设计上遇到问题？

Question

我有一个难以置信的困难时间设计推特打字前的搜索栏。在我的搜索栏中添加Typeahead似乎添加了三个新类，.twitter-typeahead、.tt-hint和.tt-input，它们的行为方式各不相同。

首先，在我添加了“提前输入”之后，搜索栏的背景被设置为透明，尽管我已经将它设置为带有不同类的白色，因此我必须添加一个白色背景包装器，它包含所有三个新类。给出.typeahead width: 100%; height:100%; border-radius: 20px;适合于包装器的边框半径和高度，但它比包装器短约50‘s。.tt-input非常适合背景的高度和宽度，但它显然是使背景透明的原因，因为.tt-input和.twitter-typeahead之间大约50 it的差异是背景的颜色，而不是白色包装。最后，.tt-hint只服从颜色。它是白色的，但当我试图设置边框-半径、高度或宽度时，它没有反应。

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

有人遇到过这样的事吗？？有人知道为什么这三个类可能不响应css吗？我的智慧到了尽头。

Answer 1

您的css被覆盖的原因是因为Typeahead.js使用javascript添加css并更改样式。因为所有这些都是在css加载到页面之后发生的，所以它具有优先性，并且扰乱了您已经做过的工作。

我注意到你用的是靴带。检查刚才打开的https://github.com/twitter/typeahead.js/issues/378问题，该问题可以帮助您在使用引导程序框架时进行提前类型设计。不过，Jharding (维护提前打字机)确实在该链接中提到了一些有趣的内容：

有人问："@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>

​