Example Typeahead.js Code Not Working

Question

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:

<html>
  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.1/typeahead.bundle.min.js"></script>
    <script type="text/javascript">
      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()
      });
    </script>
  </head>
  <body>
    <input class="typeahead" type="text" placeholder="numbers (1-10)" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">
  </body>
</html>

Antti29 · Accepted Answer · 2017-10-05 05:19:41Z

I believe that its not working because you're including the script tag in the <head> and the script is executing before seeing the .typeahead element is in the body.

A simple fix would be to use jQuery's $(document).ready() callback to wait until the document is ready before executing this javascript:

$(document).ready(function() {
    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()
    });
});

Dhanu Gurung · Accepted Answer · 2015-02-11 11:17:40Z

0

I couldn't find any issue in your code. Your code is perfectly working fine for me.

Here is working JsFiddle DEMO with following few CSS additions:

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.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-dropdown-menu {
  width: 422px;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -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;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

edited Feb 11, 2015 at 11:17

answered Mar 4, 2014 at 10:26

Dhanu Gurung

8,91411 gold badges49 silver badges61 bronze badges

2 Comments

mark Over a year ago

The jsfiddle works because jsfiddle wraps the js code in $(window).load(...), which will wait for the typeahead element to load before running the js

Dhanu Gurung Over a year ago

@iewebguy: Updated fiddle link now. No idea how that link became invalid.

Collectives™ on Stack Overflow

Example Typeahead.js Code Not Working

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related