twitter typeahead不起作用

Question

我有如下脚本

 <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 Bootstrap v3.1.1

我看到下面的任何下拉？有人遇到同样的问题。？

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

Answer 2

它没有被打破。 CSS的默认twitter类型未提供。你需要输入自己的CSS。我使用以下CSS，只需复制并粘贴它，并将其与提前输入

一起使用

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;