Autocomplete with data from asmx webservice with multiple input parameters

2 posts, 0 answers
  1. Morten
    Morten avatar
    267 posts
    Member since:
    Jul 2012

    Posted 05 Apr 2013 Link to this post

    I'm moving an application from jQuery UI to kendo UI and have trouble getting kendo autocomplete do what the jquery ui autocomplte does.

    The autocomplete queries the server with 3 input paramters and returns a json array of objects:
    $('#reportLocation').autocomplete({
        minLength: 4,
        source: function (request, response) {
     
            var country = $('#ddlLocationCountry').val();
     
            $.ajax({
                type: "POST",
                url: "../../ws/wsLocations.asmx/GetLocationsBySearchString",
                data: '{searchString: "%' + request.term.replace(/\ /g, '%') + '%", country: "' + country + '", includeInactive: "False"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                dataFilter: function (data) { return data; },
                success: function (data) {
                    $('#locationsByPosition').empty();
                    var json = $.parseJSON(data.d);
                    response($.map(json, function (item) { return { value: item.LName, id: item.LId} }));
                },
                error: function (result) {
                    alert('wsLocations.asmx/GetLocationsBySearchString failed: ' + result.status + ' ' + result.statusText);
                }
            });
        },
        select: function (e, ui) {
     
            var lLocationId = ui.item.id;
            $('#selectedLocationId').text(lLocationId);
     
        }
    });
    I can't figure how to setup/configure the kendo ui autocomplete (or combobox) datasource right.
    Is the above possible?
  2. Morten
    Morten avatar
    267 posts
    Member since:
    Jul 2012

    Posted 05 Apr 2013 Link to this post

    with ref to this thred: http://www.kendoui.com/forums/ui/autocomplete/problem-sending-json-data-to-asmx-webservice.aspx

    I got this working:

    $("#acLocation").kendoAutoComplete({
        minLength: 1,
        dataTextField: "LName",
        filter: "contains",
        dataSource: new kendo.data.DataSource({
            type: "json",
            transport: {
                read: {
                    type: "POST",
                    url: "../../ws/wsLocations.asmx/GetLocationsBySearchString",
                    contentType: 'application/json; charset=utf-8',
                    datatype: "json",
                    data: function () {
                        return {
                            searchString: '%' + $("#acLocation").data("kendoAutoComplete").value().replace(/\ /g, '%') + '%',
                            country: "DK",
                            includeInactive: "False"
                        }
                    }
                },
                parameterMap: function (options) {
                    return JSON.stringify(options);
                }
            },
            serverFiltering: true,
            serverSorting: true,
            pageSize: 10,
            schema: {
                parse: function (response) {
                    return ($.parseJSON(response.d));
                }
            }
        })
    });

  3. Kendo UI is VS 2017 Ready
Back to Top