Can't get typeahead.js to work, no results will show

Question

I've been trying to get typeahead.js to work for 2 days now, and I refuse to believe it should be this hard. Not a single example have worked so far, and I'm stuck with figuring out what is going wrong.

First of all, my typeahead.bundle.js file is downloaded from this repository:

https://github.com/twitter/typeahead.js/tree/master/dist

My code looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Typeahead example</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  </head>
  <body>

    <input id="search"/>

  <!-- jQuery -->
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <!-- Latest compiled and minified Bootstrap -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <!-- Latest Typeahead.js -->
  <script src="typeahead.bundle.js"></script>

  <script type="text/javascript">
  var colors = ["red", "blue", "green", "yellow", "brown", "black"];

  $(document).ready(function() {

    $('#search').typeahead({source: colors});
  })

  </script>
  </body>
</html>

Please help me figure this out.

EDIT : From sakir's answer, I've now changed my Javascript code to fit the version 10 syntax, but it still won't show any suggestions:

  <script type="text/javascript">
  var colors = ["red", "blue", "green", "yellow", "brown", "black"];

  $(document).ready(function() {

    $('#search').typeahead({
     highlight: true,
     hint: false
     }, colors);
  });

  </script>

Answer 1

I guess your example only work with typeahead 0.9.x version.with the 10 version,it seems there are notable changes.u can take a look at here for more info.

I tested your example with the typeahead version 0.9 and it works fine.Here is the running sample.

http://jsfiddle.net/179yevon/

if u wanna use the latest version of typeahead ,u can chech the examples here

as u can see that from first example , source parameter accept a function like that source: substringMatcher(states) . May be you can change your code according to that

update With the v.10,u can do taht something like this.

  var colors = ["red", "blue", "green", "yellow", "brown", "black"];

var colorsource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // `states` is an array of state names defined in "The Basics"
  local: colors
});

$('#search').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'color',
  source: colorsource
});

Here is the fiddler

http://jsfiddle.net/qug5qdnp/

*what bloodhood do that is prepare the datasource according to typeahead source. As mentioned above that source get the function as parameter and function expect the string array.source of the type ahead only accept an array of string and ,u need to convert it to array of the array if not planning to use bloodhood

Can't get typeahead.js to work, no results will show

Question

1 answers

solution1
0 ACCPTED 2015-07-31 14:09:42

Can't get typeahead.js to work, no results will show

Question

1 answers

solution1 0 ACCPTED 2015-07-31 14:09:42

solution1
0 ACCPTED 2015-07-31 14:09:42