Filtering by 'contains' in flat array

Question

Should be straightforward but I need to know if we can filter the dropdown datasource which is a flat array in my case by contains query filter? By default, it uses startsWith. I followed the examples for filtering in the documentation but everywhere we are using array of objects with some property to pass to Query object.

My data source is ["Mango", "Apple", "Banana"]

If i type 'ppl' it should return Apple

This is what I have currently but not working -

ejs-dropdownlist #fruitNames width="440" [allowFiltering]='true' id='fruitName' name="fruit" [dataSource]='fruitsList'
            [(ngModel)]='selectedFruit' (filtering)='onFiltering($event)' (select)="onFruitSelect($event, null)" placeholder='Select Fruit*'
            required>
          </ejs-dropdownlist>

public onFiltering: EmitType<any> = (e: FilteringEventArgs) => {
    console.log(e.text);
    // load overall data when search key empty.
    if (e.text === '') {
      e.updateData(this.fruitsList);
    } else {
      let query: Query = new Query();
      // change the type of filtering
      query = (e.text !== '') ? query.where(this.fruitsList, 'contains', e.text, true) : query;
      e.updateData(this.fruitsList, query);
    }
  };

Sureshkumar P · Answer

Hi Samir,

Greetings from Syncfusion support.

Based on your shared requirement with code example. We suspect that you want to perform the filtering action with filter type as contains. We suggest you use our filterType property to achieve your requirement without performing any customization in filter action.

Kindly refer the below code example.

[component.html]

<ejs-dropdownlist #fruitNames width="440" filterType='contains' [allowFiltering]='true' id='fruitName'

name="fruit" [dataSource]='fruitsList' [(ngModel)]='selectedFruit' placeholder='Select Fruit*' required>

</ejs-dropdownlist>

[component.ts]

/**

* DropDownList Filtering Sample

*/

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: 'app.component.html'

})

export class AppComponent {

//define the filtering data

public fruitsList = ["Mango", "Apple", "Banana"];

public height: string = '220px';

public watermark: string = 'Select a fruit';

public filterPlaceholder: string = 'Search';

}

To know more about filterType property, please refer the API documentation link: https://ej2.syncfusion.com/documentation/api/drop-down-list#filtertype

We have created the sample based on your requirement. please find the sample here: https://stackblitz.com/edit/angular-u738ex-y9k7gt?file=app.component.ts

Regards,

Sureshkumar P