Angular - syncfusion ejs autocomplete selecting incorrect value

Question

Using a Syncfusion EJS Autocomplete element in a search box. The issue being reported is that the user is not able to select the value searched

I know the issue, is because the data passed to the AutoComplete has some duplicate values, but they are distinct based on a second value. The code below hopefully show the issue

<div class="control-section" style="margin:130px auto;width:300px">
  <ejs-autocomplete
    id="sample-list"
    #sample
    [dataSource]="countriesData"
    [autofill]="isBool"
    [fields]="fields"
    (select)='selectIssuer($event)'
    filterType="Contains"
  >
  <ng-template #itemTemplate let-data>
    <!--set the value to itemTemplate property-->
    <div class='item'>
      <div>{{data.Name}} -- {{data.Structure != 'SPV' ? 'BT' : data.Structure}}</div>      
    </div>
  </ng-template>
  </ejs-autocomplete>
</div>

/**
 * AutoComplete Highlight Sample
 */
import { Component, ViewChild } from '@angular/core';
import { AutoCompleteComponent } from '@syncfusion/ej2-angular-dropdowns';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  public countriesData = [
  { Name: 'Client 1' , Id: 'A3D49279-18DC-40FB-B843-B6207518B379', Structure: 'BT'}, 
  { Name: 'Client 1' , Id: '77ED2BD8-2309-4792-9264-01DEAFC3227E', Structure: 'SPV'},
  { Name: 'Client 2' , Id: 'BA017D4F-DD5C-4F2D-852C-DD17AF209436', Structure: 'BT'}, 
  { Name: 'Client 3' , Id: '78FCDCB9-06EA-4D9B-A352-171B1594AE24', Structure: 'SPV'},
  { Name: 'Client 4' , Id: '48C3168A-FA2A-4EF7-B184-61F18C47AB6D', Structure: 'BT'}, 
  { Name: 'Client 4' , Id: 'E734CA83-91FF-4475-B35E-BE232ACBF137', Structure: 'SPV'}
];
  public fields: Object = { value: 'Name' };
  public isBool: Boolean = true;
}

  selectIssuer(_issuer: any) {    
    this.getSearchIssuer.emit({ issuer: <CombinedIssuer>_issuer.itemData, clear: false });    
  }

AS is visible, some of the Client Names are the same, but what makes them distinct is the combination with the Structure. The issue is that when a user selects say Client 4 that has an SPV Structure, it still loads the Client 4 with the BT structure.

Is it possible for the EJS Autocomplete to take in to consideration the combination of fields to make sure the correct item is selected or is is possible for the EJS Autocomplte to use the Item Id as well Can it be possible to pass in the Id value to the Fields property ?

score 0 · Answer 1 · answered Feb 02 '23 at 18:35

I was able to figure this out, so sharing my findings: The additional code is shown below with ...

      <ejs-autocomplete id='combinedIssuerSearch' #searchCombinedIssuers
                        [dataSource]='ixDispalyCombinedIssuerList'
                        [fields]='issuerFields'
                        ShowBorder='False'
                        (select)='selectIssuer($event)'
                        [placeholder]='defaultText'
                        [filterType]='issuerFilterType'
                        *(filtering)='onFiltering($event)'*
                        [showClearButton]="false"
                        class="auto-complete-search">
        <ng-template #itemTemplate let-data>
          <!--set the value to itemTemplate property-->
          <div class='item'>
            <div class='issuer-name'> {{data.Name}}</div>
            <div class="ls_spv">{{data.Structure != 'SPV' ? 'BT' : data.Structure}}</div>
          </div>
        </ng-template>
      </ejs-autocomplete>

in the ts file I added code to handle the OnFiltering event

  onFiltering(args) {
    args.preventDefaultAction = true;
    var predicate = new Predicate('Name', 'contains', args.text, true);
    predicate = predicate.or('Structure', 'contains', args.text, true);
    var query = new Query();
    query = args.text != '' ? query.where(predicate) : query;
    args.updateData(this.ixDispalyCombinedIssuerList, query);
  }

Angular - syncfusion ejs autocomplete selecting incorrect value

1 Answers1