New to Typeahead/Bloodhound, and I'm struggling to get a very basic example of Typeahad.js working on localhost when querying a simple rest service that returns valid json. When I point my url to one used in the typeahead examples, it works fine (by "works", I mean the suggestion popup appears with the default string representation i.e. json). I am returning valid json and the appropriate header
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>States</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<script>
$(document).ready(function () {
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
//local: states
remote: {
url: '../search.php?q=%QUERY',
//url: 'https://twitter.github.io/typeahead.js/data/films/post_1960.json',
wildcard: '%QUERY'
}
});
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'states',
//display: 'value',
source: states
});
});
</script>
</head>
<body>
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
</body>
Image showing the response headers for my service.
Any idea what I may be doing wrong?