CODEWITHSUNDEEP
javascriptjquerytypeahead.js
FooBar
FooBar

Reputation: 6108

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.

Upvotes: 14

Views: 17082

Answers (6)

Mike S
Mike S

Reputation: 312

If you want to use wildcard parameter %QUERY, then add url = url.replace("%QUERY", q);

$('#programme').typeahead({
    remote: {
        url: 'typeahead.php?programme&q=%QUERY',
        replace: function (url, q) {
            url = url.replace("%QUERY", q);
            let val = $('#school').val();
            if(val) url += '&school_name=' + encodeURIComponent(val);
            return url;
        }
    },
    limit: 10
});

Upvotes: 0

Jess
Jess

Reputation: 25079

Am I looking at the same thing as all of you?

http://www.runningcoder.org/jquerytypeahead/

It looks like it has changed AGAIN! It is not very obvious how to do it in the documentation, but there is example code. I pulled this straight from the code in the documentation.

There is a second example in the documentation where they do it yet a different way! This way is the most succinct I think. 

// Set a function that return a request object to have "dynamic" conditions
dynamic: true,
source: {
    tag: {
        ajax: function (query) {
            if (query === "hey") {
                query = "hi"
            }
            return {
                url: "http://www.gamer-hub.com/tag/list.json",
                dataType: "jsonp",
                path: data,
                data: {
                    q: query
                }
            }
        }
    }
}

And here is my working example:

                source: {
                    ajax: function() {
                        var filter = {
                            partnerId: @Model.PartnerId,
                            productTypeId: @Model.ProductTypeId,
                            unitType: $("[name=UnitType]").val(),
                            manufacturer: "",
                            columnName: "@nameof(SaleViewModel.Manufacturer)"
                        };
                        var queryString = $.param(filter);
                        return {
                            url: recentEntriesBaseUrl + "?" + queryString
                        }
                    }
                },

Upvotes: 0

Andy Corman
Andy Corman

Reputation: 723

@Mattias, Just as a heads up, you could clean up your replace method a little by supplying the optional url parameter.

$('#programme').typeahead({
    remote: {
        url: 'typeahead.php?programme&type=1&school_name=',
        replace: function (url, query) {
            // This 'if' statement is only necessary if there's a chance that the input might not exist.
            if ($('#school').val()) {
                url += encodeURIComponent(('#school').val());
            }
            return url;
        }
    },
    cache: false,
    limit: 10
});

Upvotes: 0

andrewtweber
andrewtweber

Reputation: 25529

I believe the accepted answer is now out of date. The remote option no longer has replace. Instead you should use prepare:

$('#programme').typeahead({
    remote: {
        url: 'typeahead.php?programme&type=1&school_name=',
        prepare: function (query, settings) {
            settings.url += encodeURIComponent($('#school').val());

            return settings;
        }
    }
});

One issue I ran into was pulling the value from another typeahead object. Typeahead essentially duplicates your input, including all classes, so you have two nearly identical objects, one with the tt-hint class and the other with tt-input. I had to specify that it was the tt-input selector, otherwise the value I got was an empty string.

$('.field-make').val();  // was "" even though the field had a value
$('.field-make.tt-input').val();  // gave the correct value

Bloodhound remote options

Upvotes: 11

FooBar
FooBar

Reputation: 6108

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

Upvotes: 14

Kirk Northrop
Kirk Northrop

Reputation: 83

There is actually a slight refinement of Mattias' answer available in the newer Bloodhound js, which reduces duplication and opportunity for error:

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

Upvotes: 3

Related Questions