title: Example Typeahead.js Code Not Working
body: <p>I cannot seem to get the dropdown to appear with any suggestions when using loading a HTML file with the following code in my browser:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css"&gt;
      &lt;!-- Optional theme --&gt;
      &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap-theme.min.css"&gt;
      &lt;script src="https://code.jquery.com/jquery-2.1.0.min.js"&gt;&lt;/script&gt;
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.1/typeahead.bundle.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        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' }
        ]
        });
  
        numbers.initialize();
  
        $('.typeahead').typeahead(null, {
        displayKey: 'num',
        source: numbers.ttAdapter()
        });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;input class="typeahead" type="text" placeholder="numbers (1-10)" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>