CODEWITHSUNDEEP
javascriptjquerytypeahead.jstwitter-typeaheadbloodhound
Steve
Steve

Reputation: 965

Typeahead/Bloodhound Remote not returning data

I am trying to get typeahead (v0.10.5)/bloodhound to bind the returned JSON data. Unfortunately, nothing appears in my suggestion window (ie, <input >). In addition, I am using jQuery v2.0.3.

The call to my endpoint is successful. When I inspect the results in Chrome, I see a properly formatted Response (ie, data and Content-type). There are no errors appearing in the Chrome's console window. There is an example of the JSON below.

I have inserted debugger; statements in the code but they are not getting hit.

The jqXHR.setRequestHeader() is there because I was making some cross site calls.

Html code

<div id="remote">
    <input class="typeahead" type="text" placeholder="Prescription names">
</div>

Javascript code

I left the // debugger; statements to show where I was trying to add breakpoints.

<script type="text/javascript">
    $(document).ready(function () {

        var prescriptions = new Bloodhound({
            datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.value); },
            queryTokenizer: Bloodhound.tokenizers.whitespace,

            remote: {
                url: '/Prescription/GetPrescriptions/?searchTerm=%QUERY',
                filter: function (prescriptions) {
                    //debugger;
                    return $.map(prescriptions, function (user) {
                        //debugger;
                        return {
                            value: user.Name 
                        };
                    });
                },
                ajax: {
                    type: 'GET',
                    dataType: 'jsonp',
                    beforeSend: function (jqXHR, settings) {
                        var authHeaders;
                        // pull apart jqXHR, set authHeaders to what it should be
                        //debugger;
                        jqXHR.setRequestHeader('Access-Control-Allow-Origin', '*');
                    }
                }
            }
        });
        // initialize the bloodhound suggestion engine
        prescriptions.initialize();
        // instantiate the typeahead UI
        $('#remote .typeahead').typeahead({
            minLength: 3,
            highlight: true,
            hint: true
        },
            {
                name: 'prescriptions',
                displayKey: 'value',
                source: prescriptions.ttAdapter()
            });
    });

</script>

JSON Result

[{"Name":"Drug1"}]

Any thoughts would be appreciated.

Steve

Upvotes: 0

Views: 2534

Answers (1)

Steve
Steve

Reputation: 965

The issue I had with my code turned out to be the dataType: "jsonp" statement. I went through a number of iterations of my code. At one point, I was referencing an different domain. Which led me to use the jsonp datatype.

In the end, I am referencing a Relative Url which did not need to have the jsonp datatype.

I changed the ajax call to dataType: "json" and it was fixed.

Upvotes: 0

Related Questions