Symfony2 with typeahead.js: How to pass %QUERY to path parameter

Question

I wanna use typeahead.js within my symfony2 project. Therefor i have the following javascript:

    $(document).ready(function(){

        var players = new Bloodhound({
          datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          remote: "{{ path('_api_player_search', {searchterm: '%QUERY', limit: 5}) }}",
          prefetch: ''
        });

        players.initialize();

        $('#searchfield').typeahead(null, {
          displayKey: 'firstname',
          source: players.ttAdapter(),
          templates: {
            suggestion: Handlebars.compile(
              '{% verbatim %}<p><strong>{{firstname}}</strong> – {{lastname}}</p>{% endverbatim %}'
            )
          }
        });
    });

As you can see, i want to pass an url created by the twig path helper to the remote: property of the Bloodhound() configuration. (Later i want to use FOSJsRoutingBundle for that purpose).

The thing is now, that Bloodhound() do not replace the %QUERY placeholder in my twig expression. Is there any way to achieve this?

Your help would really be appreciated! :)

Answer 1

Ok i've found a solution:

According to @Peter Bailey's answer on this question i have created a custom twig extension to be able to add an url_decode filter to my {{ path() }} tag like {{ path() |url_decode }}.

This will prevent %QUERY to be converted to %25QUERY, an then it could be replaced in the rendered url by javascript.

Additionally i also add a |raw filter, to avoid the ampersand beeing encoded. So finally my tag looks something like this: {{ path() |url_decode|raw }}