Question

我在制作打字工作时遇到了麻烦。我一直在谷歌搜索一段时间没有任何帮助我。这就是我所做的：试过简单的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以防万一我忘了。我错过了什么？问题是，正如我在标题中提到的，没有下拉菜单。

Answer 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 bundle（包含其他所有内容）。例如typeahead.bundle.js

并确保在您的网页上按此顺序添加内容：css包含，然后是您的javascript包含，然后是您的内联JavaScript。

希望有所帮助。

twitter的typeahead.js没有弹出下拉窗口

1 个答案: