Search code examples
typeaheadtypeahead.jstwitter-typeahead

twitter's typeahead.js doesn't pop dropdown window

I'm having trouble making typeahead work. I have been googling for a while now and nothing helped me. This is what I've done: Tried simple 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>

This is my input button:

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

And these are my includes:

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

This is complete html in case I forgot something. What am I missing? Problem is, as I mentioned in headline, no dropdown menu appears.

Solution

  • Hey I was able to copy the example as a jsfiddle:

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

    Here is full code on 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>

    FYI you don't need to include all those 4 scripts. You need to include

    And make sure you include the things in this order on your page: css includes, then your javascript includes, followed by your inline javascript.

    Hope that helps.