This is a migrated thread and some comments may be shown as answers.

Autocomplete with data from asmx webservice with multiple input parameters

1 Answer 186 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Morten
Top achievements
Rank 2
Iron
Iron
Veteran
Morten asked on 05 Apr 2013, 02:35 PM
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?

1 Answer, 1 is accepted

Sort by
0
Morten
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 05 Apr 2013, 03:56 PM
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));
            }
        }
    })
});

Tags
AutoComplete
Asked by
Morten
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Morten
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or