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

Filtering on more than one data field

2 Answers 267 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Dan Lewis
Top achievements
Rank 1
Dan Lewis asked on 21 Mar 2012, 07:01 PM
Hi,

I am using the autocomplete widget to suggest employee lookups based on a WCF web service that return JSONP data.

The WCF service is being called fine using server filtering and returns data to a DataSource attached to the autocomplete.

The problem is that I would like to be able to show item template matches based on more than one column value in the data source. e.g. If there is an employee named John Smith, I should be able to type 'John' or 'Smith' into the autocomplete input box and have it show an entry.

The WCF service is returning the JSON data records OK, but the autocomplete still only filters on whichever column I put in dataTextField so I can have dataTextField:"FirstName" or dataTextField: "LastName" but not both?

Is there way I can configure the autocomplete to match both fields?

Here's the code I am using for reference:

$(document).ready(function () {
        $("#autoComplete").kendoAutoComplete({
            minLength: 2,
            dataTextField: "LastName",
            dataValueField: "NetworkId",
            template: '<img src=""> <h3> ${data.LastName} ${data.FirstName} </h3> ${data.Office}',
            dataSource: new kendo.data.DataSource({
                severFiltering: true,
                serverPaging: true,
                transport: {
                    read: {
                        // the remote service URL
                        url: "http://localhost:8080/EmployeeService.svc/employees?callback=?",
                        // JSONP is required for cross-domain AJAX
                        dataType: "jsonp",
                        // additional parameters sent to the remote service
                        data: {
                            filter: function () {
                                return $("#autoComplete").data("kendoAutoComplete").value();
                            }
                        }
                    }
                }
            }),
            change: function () {
                this.dataSource.read();
            }
        })
    });

Thanks,

Dan.

2 Answers, 1 is accepted

Sort by
0
Kjell
Top achievements
Rank 1
answered on 26 Mar 2012, 04:49 PM
I'm doing something similar and I just use my own filtering logic in the web service.  In my case the data is in a datatable and I just do a .select and then return only the filtered data. 

Another idea, but I'm not sure if this would work, is you could return an additional value which is first + last concatenated and then use that as the datatextfield.   Pretty low tech I know but thought I would just throw it out.
0
Dan
Top achievements
Rank 1
answered on 05 Apr 2012, 11:08 AM
Thanks for the follow-up. I actually switched to the jQuery UI auto-complete plugin as this has exactly my required bevahior which is to match on either one or two columns in the data source and show all the matches in the autocomplete box...
Tags
AutoComplete
Asked by
Dan Lewis
Top achievements
Rank 1
Answers by
Kjell
Top achievements
Rank 1
Dan
Top achievements
Rank 1
Share this question
or