Twitter typeahead - %QUERY being passed as string for remote query

Question

I've looked at a number of threads on here, (as well as the official examples) but I can't seem to find a problem similar to my own.

I'm probably being a bit thick here - my %QUERY string is being passed as part of a remote query, which I obviously don't want. example:

"NetworkError: 404 NOT FOUND - http://local.example.co:8000/search-schools/%QUERY"`

Here's my JS (as you can see I have multiple input boxes on a page, each one on a separate bootstrap3 tab (that will be the focus of another question):

<script type="text/javascript">

            var schoolSource = new Bloodhound({
                hint: false,
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                   url: '/search-schools/%QUERY'
                }
            });
            schoolSource.initialize();

</script>
<script type="text/javascript">

            $('#schoolSearch1').typeahead(null, {
                name: 'schoolSearch1',
                displayKey: 'name',
                source: schoolSource
            });

</script>
<script type="text/javascript">

            $('#schoolSearch2').typeahead(null, {
                name: 'schoolSearch2',
                displayKey: 'name',
                source: schoolSource
            });

</script>

Behaviour: I can see that when I enter search text into the input box, an attempt to communicate with the remote URL is made, however it passes the literal %QUERY string instead of what's in the input box.

What am I doing wrong? How do I get the query string to be passed to bloodhound?

Answer 1

According to the sample in the link from OP, you should probably include the wildcard property in your remote configuration. Try:

var schoolSource = new Bloodhound({
      hint: false,
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
          url: '/search-schools/%QUERY',
          wildcard: '%QUERY'
        }
}

Answer 2

An easy fix, although I still don't understand why this parameter needs to be included. Simply change:

<script type="text/javascript">

            var schoolSource = new Bloodhound({
                hint: false,
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                   url: '/search-schools/%QUERY'
                }
            });
            schoolSource.initialize();

</script>

to this (note additional entry within remote):

<script type="text/javascript">
    var schoolSource = new Bloodhound({
        hint: false,
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
           url: '{% url 'schoolSearchJSONResponseEmpty' %}%QUERY',
           wildcard: '%QUERY'
        }
    });
    schoolSource.initialize();
</script>