下拉菜单自动完成

Question

我的 Angular 17 项目需要帮助。我正在使用反应式表单构建表单，并且需要特定输入（即前缀输入）的帮助。

对于我现在所做的，如果我单击输入，将会出现一个下拉菜单，用户可以在其中选择他/她自己的前缀：

如您所见，点击输入即可正常工作。我想添加的是自动完成功能。例如，如果用户想要将“意大利”作为他/她的前缀，在这种情况下他/她需要向下滚动以查找意大利。我想要的是，当他/她输入+39时，意大利将是第一个也是唯一的选项，通过单击“Enter”，输入中将出现所选的前缀（以及标志），如果他/她仅写入“3”，仅显示“3”所在的选项，并且 3 突出显示。

我怎样才能实现这个目标？

PS：在下拉菜单中提供键盘导航也很好

Answer 1

您可以使用管道过滤下拉列表中显示的项目。 Pipe 会根据使用类型实时筛选可用的选择。

管道接受所有项目和您输入的键入值。 为了简单起见，我选择了字符串。但它也适用于物体。

@Pipe({
  name: 'countryListFilter',
  standalone: true,
})
export class CountryListFilterPipe implements PipeTransform {
  transform(items: string[], filter: string | null) {
    if (filter === null) {
      return items;
    }
    return items.filter((item) => item.includes(filter));
  }
}

在您的组件中，使用管道向下拉列表提供项目列表。我只是选择了一个div，这样我就不需要实现回撤，但提供的数据应该是相同的。

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CountryListFilterPipe, FormsModule, ReactiveFormsModule],
  template: `
    <h1>Autocomplete Input</h1>
    <input [formControl]="inputControl">
    @for (country of countries | countryListFilter: inputControl.value; track country) {
      <div>{{country}}</div>
    }
  `,
})
export class App {
  public inputControl = new FormControl<string>('');

  countries = ['+49', '+93', '+43'];
}

Stackblitz 示例