twitter 的 typeahead.js 不弹出下拉窗口答案

【问题标题】：twitter's typeahead.js doesn't pop dropdown windowtwitter 的 typeahead.js 不弹出下拉窗口
【发布时间】：2014-02-19 21:44:29
【问题描述】：

我无法使预先输入正常工作。我已经在谷歌上搜索了一段时间，但没有任何帮助。这就是我所做的：试过简单的official example:

<script type="text/javascript">
    // instantiate the bloodhound suggestion engine
    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
    $('#id_q').typeahead(null, {
        displayKey: 'num',
        source: numbers.ttAdapter()
    });
</script>

这是我的输入按钮：

            <form class="form-search" method="get" action="/search/">
                <div class="input-prepend">
                    <button type="submit" class="btn">Search</button>
                    <input type="text" class="span2 search-query typeahead" id="id_q" name="q" autocomplete="off" data-provide="typeahead">
                </div>
            </form>

这些是我的包括：

<script src="{% static "js/typeahead.js/bloodhound.js" %}"></script>
<script src="{% static "js/typeahead.js/typeahead.bundle.js" %}"></script>
<script src="{% static "js/typeahead.js/typeahead.bundle.min.js" %}"></script>
<script src="{% static "js/typeahead.js/typeahead.jquery.js" %}"></script>

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<link href="//raw.github.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css" rel="stylesheet" media="screen">

这是complete html，以防我忘记了什么。我错过了什么？问题是，正如我在标题中提到的，没有出现下拉菜单。

【问题讨论】：

标签： typeahead typeahead.js twitter-typeahead

【解决方案1】：

嘿，我能够将示例复制为 jsfiddle：

http://jsfiddle.net/ff9E5/2/

这里是 jsfiddle 的完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <link rel="stylesheet" type="text/css" href="http://twitter.github.io/typeahead.js/css/examples.css">


  <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
  <script type='text/javascript' src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
  var numbers;

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

  numbers.initialize();

  $('.typeahead').typeahead(null, {
    displayKey: 'num',
    source: numbers.ttAdapter()
  });

});//]]>  

</script>


</head>
<body>
  <input class="typeahead" type="text" placeholder="numbers (1-10)" autocomplete="off">

</body>
</html>

仅供参考，您不需要包含所有这 4 个脚本。您需要包括

jQuery 例如jquery-1.10.2.min.js (https://code.jquery.com/jquery-1.11.0.min.js)
typeahead 捆绑包（它包括其他所有内容）。例如typeahead.bundle.js

并确保在页面上按以下顺序包含内容：css 包含，然后是 javascript 包含，然后是内联 javascript。

希望对您有所帮助。

【讨论】：

好的，谢谢，复制的 js 加载函数让它工作了。但它弄乱了我的 css（将修复），而不是输入中的文本，而是显示第一个选项。
重要的是要注意，如果您的输入元素有错误的类下拉将不会呈现。