How to add custom querystring parameter in kendo ui autocomplete

Question

I am unable to change the url before kendo autocomplete widget send ajax request to service It is already loading first before i change the url in paramter map.Kendo is automatically adding the search string to URL. When I press a key I am able to change the url but data is bindig to autocomplete with prev request data. Can any one suggest me to get the right place of changing url.

   $('#AddressSearchTerm').kendoAutoComplete({
            dataTextField:"Text"
            filter: "contains",
            minLength: 2,
            delay: 700,
            dataSource: {
                type: "json",
                serverFiltering: true,
                transport: {
                    read: "http://services.postcodeanywhere.co.uk/CapturePlus/Interactive/Find/v2.00/json3.ws?SearchTerm=a&LastId=&SearchFor=Everything&Country=GBR&LanguagePreference=EN",
                    type: "POST",
                    dataType: "jsonp",
                    parameterMap: function (options, operation) {
                        var p = $('#AddressSearchTerm').data("kendoAutoComplete");
                        var serviceurl1 = "http://services.postcodeanywhere.co.uk/CapturePlus/Interactive/Find/v2.00/json3.ws?SearchTerm=" + options.filter.filters[0].value + "&LastId=&SearchFor=Everything&Country=GBR&LanguagePreference=EN";
                        p.dataSource.transport.options.read.url = serviceurl1;
                    }
                }, 

                schema:{data:"Items"}
             }
     });

score 2 · Answer 1 · answered Nov 13 '14 at 10:20

2

Instead of defining the variable parameters in paramMap, you should use data in transport.read definition. The documentations says:

enter image description here

So, your code should be something like:

$('#AddressSearchTerm').kendoAutoComplete({
    dataTextField: "Text",
    filter: "contains",
    minLength: 2,
    delay: 700,
    dataSource: new kendo.data.DataSource({
        type: "json",
        serverFiltering: true,
        transport: {
            read: {
                url: "http://services.postcodeanywhere.co.uk/CapturePlus/Interactive/Find/v2.00/json3.ws?SearchTerm=a&LastId=&Country=GBR&LanguagePreference=EN",
                data: function (options) {
                    console.log("value", options.filter.filters[0].value);
                    return "SearchTerm=" + options.filter.filters[0].value
                }
            },
            type: "POST",
            dataType: "jsonp",
        },

        schema: {data: "Items"}
    })
});

answered Nov 13 '14 at 10:20

OnaBai

40,767
6
96
125

It is worked for me. OnaBai answer is correct Small change required, instead of returning data as object(unfortunately not worked) I tried to set the url with required query string ,so before widget sending ajax request I have set the url with required query string – Ravi Hanok Nov 13 '14 at 13:15
modified data function like this data: function (options, operation) { var p = $('#AddressSearchTerm').data("kendoAutoComplete"); var serviceurl1 = "http://services.postcodeanywhere.co.uk/CapturePlus/Interactive/Find/v2.00/json3.ws?SearchTerm=" + options.filter.filters[0].value + "&LastId=&SearchFor=Everything&Country=GBR&LanguagePreference=EN"; p.dataSource.transport.options.read.url = serviceurl1; } – Ravi Hanok Nov 13 '14 at 13:18
By modifing any data source read url `dataSource.transport.options.read.url` with updated url, you can update your api url and which worked for me. – Jani Devang Jan 19 '18 at 06:39

How to add custom querystring parameter in kendo ui autocomplete

1 Answers1