I'm trying to integrate typeahead.js with my Go program. It doesn't seem to be working. Here's what I have so far:
Directory Structure:
/hello/
public/
js/
countries.json
form.js
typeahead.min.js
templates/
form.html
hello.go
countries.json:
["Andorra","United Arab Emirates","Afghanistan","Antigua and Barbuda","Anguilla"]
form.js
var countries = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
prefetch: {
url: 'hello/public/js/countries.json',
filter: function(list) {
return $.map(list, function(country) { return { name: country }; });
}
}
});
countries.initialize();
$('#prefetch .typeahead').typeahead(null, {
name: 'countries',
displayKey: 'name',
source: countries.ttAdapter()
});
typeahead.min.js:
The contents from http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.min.js
form.html
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="[absolute path to]/hello/public/js/form.js"></script>
<script src="[absolute path to]/hello/public/js/typeahead.min.js"></script>
<script type="text/javascript"></script>
<body>
<form method="post" action="/join" id="loginForm">
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Countries">
</div>
<button type="submit">Join</button>
</form>
</body>
</html>
File server in hello.go:
http.Handle("/public/js/", http.StripPrefix("/public/js", http.FileServer(http.Dir(filepath.Join(cwd, "/github.com/hello/hello/public/js")))))
Error in console:
Uncaught SyntaxError: Unexpected token < typeahead.min.js:1 Uncaught SyntaxError: Unexpected token <
I've referenced:
http://runnable.com/UlXgeluakNULAAAv/create-an-autocomplete-input-box-with-typeahead-js-for-jquery-and-javascript http://plugins.upbootstrap.com/bootstrap-ajax-typeahead/
I've been trying to figure this out for a while now. I can see the form display and it seems like bootstrap and jquery are being imported from the CDN but there is no drop down auto complete suggestions.
I'll really appreciate help!! Or let me know if you need anymore information. Thanks!
The error you're getting about "<" in typeahead.min.js:1 sounds like your backend is returning html instead of javascript.
You might want to check your routes.
You didn't show hello.go, so this is just a guess, but I think the path in html should be "/js/...", not an absolute path.