推特预输入不起作用答案

【问题标题】：twitter typeahead is not working推特预输入不起作用
【发布时间】：2014-03-02 21:17:33
【问题描述】：

我有如下脚本

 <script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/typeahead.js"></script>
<script>
var numbers = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ num: 'one' },
{ num: 'two' },
{ num: 'three' },
{ num: 'four' },
{ num: 'five' },
{ num: 'six' },
{ num: 'seven' },
{ num: 'eight' },
{ num: 'nine' },
{ num: 'ten' }
]
});


 // initialize the bloodhound suggestion engine
    numbers.initialize();
    // instantiate the typeahead UI
    $('.men-input-bx .typeahead').typeahead(null, {
    displayKey : 'num',
    source : numbers.ttAdapter()
    });
</script>

还有我的html

<input class="men-input-bx typeahead" type="text" spellcheck="false"  />

typeahead.js 0.10.1 jQuery v1.11.0 引导 v3.1.1

我看到如下下拉菜单？有人遇到同样的问题吗？

【问题讨论】：

标签： jquery twitter-bootstrap twitter-typeahead

【解决方案1】：

由于您的 input 同时具有 men-input-bx 和 typeahead 类，因此您的 jQuery 选择器不正确。您当前正在选择一个元素 .typeahead，它是元素 .men-input-bx 的子元素。

试试这个：

$('.men-input-bx.typeahead').typeahead(null, { // Removed space after .men-input-bx
    displayKey : 'num',
    source : numbers.ttAdapter()
});

【讨论】：

我已经修复了...抱歉没有更新...但看起来下拉列表已损坏..

【解决方案2】：

它没有坏。默认的 twitter typeahead 不附带 CSS。您需要放入自己的 CSS。我使用以下 CSS，只需复制并粘贴它并与预先输入一起使用

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {    /* used to be tt-dropdown-menu in older versions */
  width: 422px;
  margin-top: 4px;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  line-height: 24px;
}

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

【讨论】：