Hey I was able to copy the example as a jsfiddle:
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
- jQuery e.g. jquery-1.10.2.min.js (https://code.jquery.com/jquery-1.11.0.min.js)
- typeahead bundle (it includes everything else). e.g. typeahead.bundle.js
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.