Search code examples
javascriptjquerytypeahead.js

Typeahead.js include dynamic variable in remote url


I have tried for hours now, to get a variable in my "remote" path. The variable will change, depending on another input. Here is the code:

school_value = $('#school').val();
$('#school').change(function () {
    school_value = $(this).val();
    $('#programme').typeahead('destroy'); // I have also tried with destroy - but it doesnt work.
});
$('#programme').typeahead({
    remote: 'typeahead.php?programme&type=1&school_name=' + school_value,
    cache: false,
    limit: 10
});

The variable 'school_type' is not set in the remote addr, and therefore not called.

Do you have any clue how to get it working? I have just switched from Bootstrap 2.3 to 3, and then noticed typeahead was deprecated. Above code worked on Bootstrap 2.3, but it seems like when the script is initialized, the remote path is locked.


Solution

  • I have found the solution! Code:

    $('#programme').typeahead({
        remote: {
            url: 'typeahead.php?programme&type=1&school_name=',
            replace: function () {
                var q = 'typeahead.php?programme&type=1&school_name=';
                if ($('#school').val()) {
                    q += encodeURIComponent($('#school').val());
                }
                return q;
            }
        },
        cache: false,
        limit: 10
    });
    

    Based on this threads answer: Bootstrap 3 typeahead.js - remote url attributes

    See function "replace" in the typeahead.js docs