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:
Thanks,
Dan.
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
0
Kjell
Top achievements
Rank 1
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.
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
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...