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之间约50px的差异是背景的颜色，而不是白色包装。最后，.tt-hint只服从颜色。它是白色的，但是当我尝试设置边框半径，高度或宽度时它没有响应。

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

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

Answer 1

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

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

有人问：   ＆＃34; @jharding如果你没有兴趣写一个官方的Bootstrap   库“如何重新分解它，以便CSS实际上是可控的   用户无需使用！important关键字，并让   他们决定是否需要Bootstrap样式。＆＃34;

@jharding：将在v0.11中实现。

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

Answer 2

尝试使用以下typeahead.js substringMatcher功能的最低调整版本;仅将所需的css应用于input元素

＆＃13;

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
      }))
    })
  })
});

＆＃13;

<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>

＆＃13;

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

2 个答案: