Angular - syncfusion ejs 自動完成選擇不正確的值

Question

在搜索框中使用 Syncfusion EJS 自動完成元素。 報告的問題是用戶無法 select 搜索到的值

我知道這個問題，是因為傳遞給自動完成的數據有一些重復的值，但它們基於第二個值是不同的。 下面的代碼有望顯示問題

<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是可見的，有些Client Name是相同的，但區別的是與Structure的結合。 問題是，當用戶選擇具有 SPV 結構的 Client 4 時，它仍然會加載具有 BT 結構的 Client 4。

EJS Autocomplete 是否有可能考慮字段的組合以確保選擇了正確的項目，或者 EJS Autocomplte 是否有可能也使用 Item Id 是否有可能將 Id 值傳遞給字段屬性？

Answer 1

我能夠弄清楚這一點，所以分享我的發現：附加代碼如下所示......

      <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>

在 ts 文件中，我添加了代碼來處理 OnFiltering 事件

  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);
  }