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


<!DOCTYPE html>
<html lang="en">
    <script src=""></script>
    <script src=""></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: '',
                wildcard: '%QUERY'

        $('#the-basics .typeahead').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        }, {
            name: 'states',
            //display: 'value',
            source: states
    <div id="the-basics">
        <input class="typeahead" type="text" placeholder="States of USA">


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