Binding and Searching Autocomplete (text,value) Fields are not working properly

[Anandraj]

Hello Team,

I have been tried with Autocomplete control as per the Syncfusion Documentation and plunker example. But I am unable to achieve my requirement.

I have tried with below code:

component:

public cityData: { [key: string]: Object; }[] = [
        { cityName: 'Australia', cityID: '1' },
        { cityName: 'Bermuda', cityID: '2' },
        { cityName: 'Canada', cityID: '3' },
        { cityName: 'Cameroon', cityID: '4' },
        { cityName: 'Denmark', cityID: '5' }
    ];

public cityFields: Object = { text: 'cityName', value: 'cityID' };
   public cityResult: Query = new Query().select(['cityName', 'cityID' ]).take(6);
   public cityPlaceHolder: string = "Find a city";
   public citySorting: string = 'Ascending';
   public citySuggestionCount: number = 5;
Html:
<ejs-autocomplete #cities id='cityElement' name="city"
                                      filterType='StartsWith'
                                      [autofill]='true'
                                      [dataSource]='cityData'
                                      [fields]='cityFields'
                                      [placeholder]='cityPlaceHolder'
                                      [query]='cityResult'
                                      [sortOrder]='citySorting'
                                      [suggestionCount]='citySuggestionCount'
                                      [(value)]="customerModel.cityID" >
                    </ejs-autocomplete>

Issues While Searching and Saving:
When i search the fields keyword like 'Aus' then searching result is no result found. but when i change the code like the 
following : 
    public cityFields: Object = { text: 'cityName', value: 'cityName' };
Searching result are working fine. but when i try to save, text field value:'Australia' only stored. but my requirement is
need to stored the city values like '1' to be stored in the database.
when i have change the code 
 public cityFields: Object = { text: 'cityName', value: 'cityID' }; 
then getting value is fine but searching result is not fine. 
Binding the Autocomplete Fields:{text and value} are not working fine. So kindly help me out to for this issue.

Thanks,
Raj 


   

[Ilakkiya Baskar]

Hi Raj,   

   

Thank you for contacting Syncfusion Support.   

   

By default, the AutoComplete component configure only value field and search operation based on performed only value field. We suggest you to get the id/desired field from selected value using dataSource.   

If you want to store the id of the data in database as per your requirement, please refer to the code block below,    

   

ngAfterViewInit() {   

     document.getElementById('btn').onclick = () => {   

     var element=document.getElementById('atcelement');   

     var obj = element.ej2_instances[0]; //autocomplete instance   

     this.sportsData.forEach((item, index) => { //getting datasource   

       if(item.Game==obj.text)   

       {   

          var data=item.Id;//getting id of the desired text   

          console.log(item.Id);   

       }    

}   

Please refer the sample below,   

http://plnkr.co/edit/RpPdD5iU1hzXc65GdBwl?p=preview   

   

Otherwise, we suggest you to use ComboBox component where filter operation for your requirement, this will configure text/value field mapping as given and get the both for selected value.   

   

Please refer the sample from the below location for more information,   

https://ej2.syncfusion.com/16.1.24/angular/documentation/combo-box/data-binding.html#2-array-of-json-data   

   

Please ensure this in your end and if you want any other information, kindly revert.    

   

Regards   

Ilakkiya B