Pass value from DOM element into typeahead with bloodhound

Question

I would like to pass a value from a hidden input field to the search remote URL parameter in bloodhound.

The variable is dynamic and will get updated every time a modal popup gets open. Its initial value is null and I believe that's why this is not working at all:

url: url + 'equipment/getSuggestions/' + $('#equipment-type-input').val() + '/%QUERY',

As you can see I'm getting it with jQuery but the value is empty. Probably because it is only getting it once when the plugin is initialized?

Here the full script:

// Instantiate the Bloodhound suggestion engine
var suggestions = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: url + 'equipment/getSuggestions/' + $('#equipment-type-input').val() + '/%QUERY',
        wildcard: '%QUERY',
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(movies, function (movie) {
                return {
                    value: movie
                };
            });
        }
    }
});

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

// Instantiate the Typeahead UI
$('#equipment-id-input').typeahead(null, {
    displayKey: 'value',
    source: suggestions.ttAdapter()
});

Answer 1

I ended up solving it this way:

// Instantiate the Bloodhound suggestion engine
var suggestions = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: url + 'equipment/getSuggestions/',
        replace: function (url, query) {
            return url + query.toUpperCase() + '/' + $('#equipment-type-input').val()
        },
        wildcard: '%QUERY',
        filter: function (numbers) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(numbers, function (number) {
                return {
                    value: number
                };
            });
        }
    }
});

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

// Instantiate the Typeahead UI
$('#equipment-id-input').typeahead({
    hint: true,
    highlight: true,
    minLength: 3
}, {
    limit: 7,
    displayKey: 'value',
    source: suggestions.ttAdapter(),
});