kendoAutoComplete for multiple dataTextField

Question

The code below works for autocomplete for FileNo (field) only. i want this function to work for other attributes of employee too. i.e FirstName, LastName

dataTextField: "FileNo" <---------------- here dataTextField gets sing field. how could it be for multiple fields?

Answer 1

Since you are the one that knows on which columns want to search, my recommendation is:

1. Implement index.php/hr_management/manage_hr/search_employee/ in such way that is able to do the search for any of the columns that you want (FileNo, FirstName, LastName...).
2. This service will return three columns (at least) providing an id, column name on which you found the match and match value.
3. match value is used for displaying values in the autocomplete.
4. Once selected value on autocomplete use the column name and match value for filtering on the grid.

Answer 2

You should use template to change what is displayed in the dropdownlist of the autocomplete. Then the dataTextField will only be used inside the input element.

Here is how it goes to create template.

Answer 3

Kendo Autocomplete has dataTextField that accepts a field name(e.g. employeeID, employeeName etc. of a datasource ) to use for filtering items.

To use multiple fields, you have to set one of the fields to hold concatenated fields during parsing of datasource in your schema as given below. Then set your filter of AutoComplete to "contains"

I did it as follows.

var myDataSrc = new kendo.data.DataSource({    
                    transport: {
                        read: {
                            type:"GET",
                            url:clientDataURL,
                            dataType: "jsonp",
                            contentType: "application/json",
                        }                           
                    }, 
                      schema: {
                            parse: function(clntDB) {
                                $.each(clntDB, function(ky, clnt) {
                                  clnt.firstName = clnt.clientUID + " | " + clnt.firstName+ "  " + clnt.lastName;

                                });
                                return clntDB;
                            } 
                     },
                     pageSize: 4    // Number of Items to show during input
        });

/// See the firstName above it's reconstructed to hold concatenated lastname , ID and firstname string.

Next step is to use parsed firstName as a value of dataTextField of kendo Autocomplete.

Then var selectedClntID; //// Actually, this aims at getting the ID for future use

$("#YOURSEARCHINPUTID").kendoAutoComplete({
                dataSource: myDataSrc ,
                template:   tmplSrchdClnt,  // YOUR TEMPLATE like "<div>firstName</div>"            
                dataTextField:"firstName",  
                filter:"contains",    /// DON'T FORGET TO ADD THIS
                minLength    : 1 ,
                select: function(e) {
                   var selectedClnt = this.dataItem(e.item.index()),
                       x = kendo.stringify(selectedClnt);
                       selectedClntID =    JSON.parse(x);


               }
                // headerTemplate: '<div><h2>ID - LastName</h2></div>'
        });

However, tough to find resource indicating like this, it's awesome when you see it working.This is engine of my project when it comes to autocompletion. I did it this way.

Alternatively, you can convert to

data = new Employee(firstname, lastname, ID); // on client side

function Employee( firstname, lastname, ID ){
  this.filterStr = firstname + ""+lastname+" "+ID;
}

give data to kendo AutoComplete dataSource and use filterStr as dataTextField.

Answer 4

Another code example adding a new field to the datacourse to use as dataTextField.

// Build our data source object.
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: readUrl,
    }
  },
  group: {field: "region"},
  schema: {
    data: function(response) {
      $.each(response, function(k, v) {
        response[k].searchString = v.airport + " " + v.iataCode;
      });

      return response;
    }
  }
});


$(selector).kendoAutoComplete({
  dataTextField: "searchString",
  filter: "contains",
  template: '<span class="k-state-default">#: data.airport # (#: data.iataCode #)</span>',
  height: 400,
  dataSource: dataSource,
});