Angular 中的自动完成不能同时处理两个值？

Question

尝试自动完成具有两个值的文本框 - 即Publication 和 city 但自动完成仅适用于 publication 而不是 city。就像你在图片中看到的那样，blow test 是 publication 而 Delhi 是 city 但如果我输入 publication and city together 则它只能在 publication 之前有效

示例：如果我输入测试，它会显示测试但是当我搜索测试-delhi 完全相同时它不会显示自动更正的测试-delhi。

component.html

<div class="form-field col-lg-12 ">
<label class="label" for="company">Publication</label>

<input [(ngModel)]="pubTitleKeyUp" (ngModelChange)="keyUpPublication(pubTitleKeyUp)" name="pub"
    class="input-text js-input" type="text" required autocomplete="off">

<div class="search-result" *ngIf="publications" style="max-height: 120px;">
<ul style="margin:0; padding:5px;">
<li *ngFor="let pub of publications">
<a (click)="onClickPublication(pub)"> {{ pub.Title }} -{{ pub.city }} </a>
                    </li>
                </ul>
            </div>

        </div>

component.ts

    keyUpPublication(e) {
    let k = e as string
    let kl = k.length

    this.publications = this.allPubs.filter(p => {
      let title = p.Title.toLowerCase()
      return title.substring(0, kl) == k.toLowerCase()
    })
  }

  onClickPublication(pub: IPub) {
    this.pubTitleKeyUp = pub.Title + '-' + pub.city;
    this.selectedPub = pub
    this.publications = []
  }

Answer 1

问题出在您的过滤器上。您只过滤 title 而不是城市。如果您正在搜索 li 文本格式，那么我建议您关注

 this.publications = this.allPubs.filter(p => {
  let title = p.Title + '-' + p.city;
  return title.toLowerCase().includes(k.toLowerCase());
})

Angular 中的自动完成不能同时处理两个值？

Autocomplet is not working with two values at the same time in Angular?

angular

autocomplete