时间戳

首页 > 解决方案 > 如何根据keyin字母而不是angular2中的狂野搜索来搜索数据

angular - 如何根据keyin字母而不是angular2中的狂野搜索来搜索数据

问题描述

我有一个下拉列表，其中我有 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)
        })
  }

标签： angulartypescript

解决方案

在这里，我更新了您的功能以仅显示最近的壁橱搜索结果，我从 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)
      })
  }

推荐阅读