Filter Multiselect with primitive array as DataSource

[Markus]

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]

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]

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]

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]

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]

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.