Filter Multiselect with primitive array as DataSource

Question

The following example shows how to filter a MultiSelect using a Query:Filtering in JavaScript MultiSelect control - Syncfusion.But all examples are based on complex data types. What if I want to filter a primitive array of string? How does the query look like in this case?

ddcomp = new MultiSelect({
          dataSource: companiesdepartments,
          placeholder:"Select one or more entries",
          allowFiltering:true,
          noRecordsTemplate:"No entries found",
          filtering: function (e: FilteringEventArgs) {
            let query = new Query();
            query = (e.text != "") ? query.where("Ihavenocolumnname", "contains", e.text, true) : query;
            e.updateData(companiesdepartments, query);
        }
      });

Vignesh Srinivasan · Answer

Hi Markus, 
 
Greetings from Syncfusion support.   
 
We have created sample based on your requirement. Please find the code sample below. 
 
Code snippet: 
 




let sportsData: string[] = [ 
    "Snooker", 
    "Tennis", 
    "Cricket", 
    "Football", 
    "Rugby" 
  ]; 
   
  let listObj: MultiSelect = new MultiSelect({ 
    dataSource: sportsData, 
    placeholder: "Select countries", 
    allowFiltering: true 
  }); 
  listObj.appendTo("#list"); 
 
 
Sample: https://stackblitz.com/edit/c4twvm?file=index.ts 
 
Kindly check with the sample. Please get back to us if you need further assistance. 
 
Regards, 
 
Vignesh Srinivasan.

Markus · Answer

Hi, thanks for your quick reply. If I use the "allowFiltering" property, the filter works as "startsWith". But I would need a "contains" filter, as my string array contains multiple words for each entry.

https://c4twvm-qymaga.stackblitz.io

Thanks, Markus

Vignesh Srinivasan · Answer

Hi Markus, 
 
 
We can able to achieve your requirement using the property filterType. It determines on which filter type, the MultiSelect component needs to be considered on search action. 
 
Code snippet: 
 




let sportsData: string[] = [ 
    "Snooker", 
    "Tennis", 
    "Cricket", 
    "Football", 
    "Rugby" 
  ]; 
   
  let listObj: MultiSelect = new MultiSelect({ 
    dataSource: sportsData, 
    placeholder: "Select countries", 
  filterType: "Contains", 
    allowFiltering: true 
  }); 
  listObj.appendTo("#list"); 
 
 
Sample: https://stackblitz.com/edit/c4twvm-8dmpnm?file=index.ts 
 
Documentation Link: https://ej2.syncfusion.com/documentation/api/multi-select/#filtertype 
 
Kindly check with the sample. Please get back to us if you need further assistance. 
 
Regards, 
 
Vignesh Srinivasan.

Markus · Answer

Hi, thanks for your help. The error message in this case was: Object literal may only specify known properties, and 'filterType' does not exist in type 'MultiSelectModel'.

But after upgrading from 17.2. to 17.4. everything works as expected.

Thanks Markus

Vignesh Srinivasan · Answer

Hi Markus, 

Thanks for the update. 
We are happy to hear that your issue has been resolved. 
Please get back to us if you need further assistance. 

Regards, 

Vignesh Srinivasan.