代码之家 › 专栏 › 技术社区 › Bhrungarajni

在Angular2中,如何基于键字母而不是野生搜索来搜索数据

typescript angular

0

Bhrungarajni · 技术社区 · 7 年前

我有一个下拉列表,其中我有100个下拉值,因此基于键输入值,我可以搜索这些值,但这些值是基于野生搜索进行搜索的,我希望下拉列表显示我首先输入的字母的值。

HTML:

  <div class="col-sm-6 pull-left m-b10 m-t10">
    <label class="lbl_manifes pull-left col-form-label g-color-gray-dark-v2 g-font-weight-700 text-sm-left no-padd">Manifestation
      <span class="required">*</span>
    </label>
    <div class="col-sm-8 pull-left no-padd w-71">
      <input type='text' (keyup)="searchDropDown(175, src13.value)" #src13 formControlName="Manifestation" [(ngModel)]="selectedManifestation" placeholder="Please keyin (eg:Ac)"
      />
      <i class="fa fa-caret-down"></i>
      <div *ngIf="allergyDropDown && allergyDropDown?.manifestation && IsHidden" class="emr-dropdown">
        <ul *ngFor="let manifestationType of allergyDropDown?.manifestation" (click)="getValue(manifestationType)" class="p-l10 m-b0 brd-b">
          <li>
            {{manifestationType.Description}}
          </li>
        </ul>
      </div>
    </div>
  </div>

TS:

  public getValue(item) {
    this.IsHidden = false;
    if (item.CategoryId == 175) {
      this.selectedManifestation = item.Description;
    }
  }

  public searchDropDown(Id, desc) {
      let params = { Id, desc: desc }
      this.emrService.getDropDown(params)
        .subscribe((res) => {
          this.IsHidden = true;
          this.initializeAllDropDown(res.Body.Data)
        })
  }

1 回复 | 直到 7 年前

1

Hitesh Kansagara 7 年前

在这里,我更新了你的函数,只显示最近的壁橱搜索结果,我有filter from item.desc你可以写下你想要筛选的实际列名,这将帮助你解决你的搜索问题。更新searchDropDown函数如下,

public searchDropDown(Id, desc, index) {
    let params = { Id: Id, desc: desc }
    this.emrService.getDropDown(params)
      .subscribe((res) => {
        this.IsHidden = true;
        this.contactIndex = index;
        var data = res.Body.Data.filter(item => item.desc.toLowerCase().indexOf(desc.toLowerCase())==0);
        this.initializeAllDropDown(data)
      })
  }