Remote URL not working in latest typeahead.js

[svalleru]

My old code that fetches typeahead suggestions from a remote URL:

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
:
<script type="text/javascript">
$(document).ready(function(){
// 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',
        //url: 'http://yourhost_ip/foo_autocomplete?query=%QUERY',
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript array
            return $.map(movies.results, function (movie) {
                return {
        //value: movie //Use this if your url returns a list of strings
        value: movie.original_title
                };
            });
        }
    }
});

// Initialize the Bloodhound suggestion engine
movies.initialize();
// Instantiate the Typeahead UI
$('.typeahead').typeahead(
{
    hint: true,
    highlight: true,
    minLength: 1
}, {
    displayKey: 'value',
    source: movies.ttAdapter()
});
});
</script>
<input class="typeahead"></input>

which used to work fine until typeahead 0.10.5, but, it's been broken with the latest release. Is the remote url format not valid anymore ?

For now, I have stopped referring to latest typeahead and included 0.10.5 instead:

<script src="https://cdn.rawgit.com/twitter/typeahead.js/gh-pages/releases/0.10.5/typeahead.bundle.js"></script>

full source: https://github.com/svalleru/autocomplete/blob/master/index.html

[sgilberg]

Hi, I was having the same problem and I noticed that the new docs for Bloodhound explicitly name a "wildcard" property under "remote". Setting that to '%QUERY' worked for me. For your example, I think it would look like this:

remote: {
        url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e',
        //url: 'http://yourhost_ip/foo_autocomplete?query=%QUERY',
        wildcard: '%QUERY',
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript array
            return $.map(movies.results, function (movie) {
                return {
                        //value: movie //Use this if your url returns a list of strings
                        value: movie.original_title
                };
            });
        }
    }

I don't know if anything has changed with the "filter" property, since I'm not using that. But for what it's worth, I had to update my CSS also with the newest version (the menu class is now .tt-menu instead of .tt-dropdown-menu, and I had to style .tt-suggestion:hover as well). Hope this helps.

[spapaseit]

Thanks a lot @sgilberg, this solved it for me; both for the wildcard and the styling.

[jameserrico]

I also have to echo thanks for @sgilberg -- solved two outstanding issues I was having after a (long overdue) upgrade.

[AlexDubr]

Thank you, @sgilberg, this was helpful!