在触摸时显示芯片自动完成组件中的下拉列表

Question

我正在使用芯片自动完成组件，当我第一次触摸芯片自动完成组件时它显示下拉列表，如果我从下拉列表中选择任何选项并再次触摸芯片自动完成组件字段，则在我们输入内容之前它不显示下拉列表。可以我们改变这个默认行为？

还有一个问题是，如果我在搜索字段中键入内容并按Enter键，则会在屏幕中显示该数据。我想显示仅存在于列表中的数据。这是stackblitz链接。

Answer 1

尝试只放置可用的玩家：

DEMO

  add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;
    // Add our fruit
    if ((value || '').trim() && this.allFruits.indexOf(value) > -1) {
      this.fruits.push(value.trim());
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }

    this.fruitCtrl.setValue(null);
  }

Answer 2

使用blur()

  selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
    this.fruitInput.nativeElement.blur()
  }