0

After not being able to yield any results with my own local api, I tried to use the example from this answer directly in my project:

// Instantiate the Bloodhound suggestion engine
var movies = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e',
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(movies.results, function (movie) {
                return {
                    value: movie.original_title
                };
            });
        }
    }
});

// Initialize the Bloodhound suggestion engine
movies.initialize();

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
    // Use 'value' as the displayKey because the filter function 
    // returns suggestions in a javascript object with a variable called 'value'
    displayKey: 'value',
    source: movies.ttAdapter()
});

When I type in the given input, I can see in the Network tab that the requests to the remote API are actually going through, but the dropdown just isn't showing up -- this is the exact same code that's in the given example, but it's not working the same.

  • There are no errors in the Console
  • I've tried stripping down my own input of any classes/ids that may have had script/styling conflicts with Typeahead

I am using jquery 3.1.1 and bootstrap 3.3.7 with Typeahead.bundle.js 0.11.1

Where could I start looking to determine why the dropdown for suggestions isn't actually appearing?

Edit: I realize now that I left out something that is probably important: This is within an MVC view, within the 'scripts' section. The scripts section is being rendered at the top of the page, and other javascript within this section is executing fine -- however, the .typeahead box that this script should be applied to is within a partial view. Maybe I'm just putting things in the wrong order.

Community
  • 1
  • 1
Rein S
  • 889
  • 6
  • 18

0 Answers0