Twitter Typeahead basic example not showing popup

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.

enter image description here

Any idea what I may be doing wrong?


Source: json

Leave a Reply