Javascript 如何在自动完成组件中显示聚焦和模糊的不同值

我试图根据聚焦/模糊自动完成输入显示不同的值

假设我们有一些项目建议，其中每个项目都有

id

和

desc

。我想按

id

和

desc

筛选项目。当我选择其中一个，且输入模糊时，应显示

id

和

desc

（例如1-item01）

当焦点回到输入上时，它应该只显示

id

（不显示

desc

），如果有任何关于该

id

的建议（比如如果有10，它应该建议1010 | desc>）。现在我必须强制删除

desc

以返回

id

。不应该是这样

谢谢你的建议

您可以尝试编辑

请参见图像上的预期行为：

更新：

基于用户@Sergey删除的答案，您只需向输入元素添加管道和模板引用。无需进行其他更改：

HTML:

更新：

基于用户@Sergey删除的答案，您只需向输入元素添加管道和模板引用。无需进行其他更改：

HTML:

控制值存取器（CVA） 这个界面就是你想要的

为什么?？该接口将DOM与角度表单分离，允许显示下拉列表和输入与表单实际使用的值不同

您可以将自定义输入实现为单独的组件*，并在中传递FormControl

以下是一个未经测试的

*编辑3-我相信这也可以作为一项指令来实施。见-

---

黑匣子之外 您的app.component.html最终将看起来像

<form class="example-form">
  <app-auto-special [users]="options" [formControl]="myControl"></app-auto-special>
</form>

因此，在黑匣子内部，我们实现了由4种方法组成的接口：

writeValue（对象：任意）：void

注册表更改（fn:any）：无效

registerOn（fn:any）：无效

setDisabledState（isDisabled:boolean）？：void

这通常意味着以下样板文件：

export class AutoSpecialComponent implements ControlValueAccessor {
  public _value: number;
  public disabled: boolean;
  onChanged: any = () => {};
  onTouched: any = () => {};

  /*
  * ControlValueAccessor boilerplate
  *
  */
  writeValue(value): void {
    this._value = value
  }
  registerOnChange(fn: any): void {
    this.onChanged = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled
  }

}

当我们想要更新formControl值或其在touched属性上时，我们复制了由

registerOnChange

和

registerOnTouched

提供的函数的副本，并调用这些副本（

this.onChanged

和

this.onTouched

）

setDisabledState

是可选的，在初始化时或从父级调用

patchValue

或

setValue

时调用

writeValue

要设置FormControl，我们调用

this.onChanged（一些值）我们可以连接到各种事件
输入
，
聚焦
，
模糊
，
选项选择
，并分别决定对以下各项执行的操作：


FormControl值
显示哪些选项
输入中应该有什么显示字符串


这个答案伴随着一个警告：这是我所做的第一个CVA实现之一，所以我的基础还不稳固


附加福利

单元测试-独立DOM显示与表单
逻辑分离-父级不再饱和

资源
从以下youtube视频了解更多信息

这伴随着以下
控制值存取器（CVA）
这个界面就是你想要的

为什么?？该接口将DOM与角度表单分离，允许显示下拉列表和输入与表单实际使用的值不同

您可以将自定义输入实现为单独的组件*，并在中传递FormControl

以下是一个未经测试的

*编辑3-我相信这也可以作为一项指令来实施。见-


黑匣子之外
您的app.component.html最终将看起来像

<form class="example-form">
  <app-auto-special [users]="options" [formControl]="myControl"></app-auto-special>
</form>

因此，在黑匣子内部，我们实现了由4种方法组成的接口：

writeValue（对象：任意）：void
注册表更改（fn:any）：无效
registerOn（fn:any）：无效
setDisabledState（isDisabled:boolean）？：void
这通常意味着以下样板文件：

export class AutoSpecialComponent implements ControlValueAccessor {
  public _value: number;
  public disabled: boolean;
  onChanged: any = () => {};
  onTouched: any = () => {};

  /*
  * ControlValueAccessor boilerplate
  *
  */
  writeValue(value): void {
    this._value = value
  }
  registerOnChange(fn: any): void {
    this.onChanged = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled
  }

}

当我们想要更新formControl值或其在touched属性上时，我们复制了由
registerOnChange
和
registerOnTouched
提供的函数的副本，并调用这些副本（
this.onChanged
和
this.onTouched
）
setDisabledState
是可选的，在初始化时或从父级调用
patchValue
或
setValue
时调用
writeValue

要设置FormControl，我们调用
this.onChanged（一些值）我们可以连接到各种事件
输入
，
聚焦
，
模糊
，
选项选择
，并分别决定对以下各项执行的操作：


FormControl值
显示哪些选项
输入中应该有什么显示字符串


这个答案伴随着一个警告：这是我所做的第一个CVA实现之一，所以我的基础还不稳固


附加福利

单元测试-独立DOM显示与表单
逻辑分离-父级不再饱和

资源
从以下youtube视频了解更多信息

这伴随着以下内容
，因此您希望在重新聚焦时自动删除描述，并且只有id应该在那里？请尝试使用管道。我已经做了一个示例，它可以给你一个开始，所以你想在重新聚焦时自动删除描述，并且只有id应该在那里？尝试使用管道。我已经做了一个示例，它可以给你一个开始，如果需要重用，它有潜力，但是
export class AutoSpecialComponent implements ControlValueAccessor {
  public _value: number;
  public disabled: boolean;
  onChanged: any = () => {};
  onTouched: any = () => {};

  /*
  * ControlValueAccessor boilerplate
  *
  */
  writeValue(value): void {
    this._value = value
  }
  registerOnChange(fn: any): void {
    this.onChanged = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled
  }

}