Autocomplete with comma ,

Question

Hi

My Autocomplete has an array of users. Which has First Name, Last Name. when user tries to search like following

John --> Finds the result

Doe --> Finds the result

John, --> Result not found even though user name is John, Doe

How to make sure auto complete will respect the comma while doing search. Following is my settings for Autocomplete

 autofill:true,
          highlight: true,
          suggestionCount:999,
          dataSource: resources,
          ignoreCase:true,
          filterType:"Contains",            

Deepak Ramakrishnan · Accepted Answer

We suspect that you are using multiple fields with different values to text field and value field . The reported issue will occur when the value field contains “John Doe” and text field contains “ John, Doe “ as Autocomplete component filters the item based on value field mapped to it. But we can overcome it modifying the query in filtering event as like below code .

<ejs-autocomplete id='games' #sample [dataSource]='data' [(value)]='value'

[placeholder]='waterMark' [autofill]='true' [suggestionCount]=999 (filtering)="filteringHandler($event)" [ignoreCase]='true' [filterType]='Contains' [fields]='fields'></ejs-autocomplete>

public filteringHandler(e)

{

let query: Query = new Query();

//frame the query based on search string with filter type.

query = (e.text !== '') ? query.where('Name', 'contains', e.text, true) : query;

//pass the filter data source, filter query to updateData method.

e.updateData(this.data, query);

}

Sample Link : https://stackblitz.com/edit/angular-dfql5j-e59txv?file=app.component.ts

If you are dealing with multiple fields we suggest you to use Syncfusion ComboBox component . You can refer the below demo for reference.

https://ej2.syncfusion.com/angular/demos/#/bootstrap5/combo-box/filtering

Deepak Ramakrishnan · Answer

Hi Parth, 
 
Greetings from Syncfusion support. 
 
Unfortunately the issue cannot be reproduced at our end with latest version (19.4.38) . You can refer the sample attached and get back to us if we have missed anything. 
 
Sample Link : https://stackblitz.com/edit/angular-dfql5j?file=app.component.html  
 
 




  
 
 
Also upgrade your version to the latest and try to replicate the issue . 
 
UG documentation (For upgrading Syncfusion packages) : https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/  
 
 
Thanks, 
Deepak R.

PDev · Answer

If you change your code to following. it will stop workingpublic fields: Object = { value: 'Code',text:'Name' };

PDev · Answer

You are correct for me both field has same value. Once I just removed value field from "fields" it was working as expected, hope this is also a right approach. fields:{ text: 'Name'},

Deepak Ramakrishnan · Answer

Yes , If we set text field alone ,the component will consider the text field as value  and filters based on it . You can use either this solution or the suggested one as per your usage.