输入中的自动完成建议作为光标后的灰色字母，而不是 select 弹出窗口

Question

我使用 angular 10 和 angular material 来构建我的网站。

我想向 matInput 添加输入建议，但采用与 matAutocomplete 不同的方式.. 我不想显示一个列表，我想向一个单词显示一个建议，该单词用户已经在输入的最后一个字符之后以灰色字母的形式输入，如果按下选项卡，它将自动完成该单词。

例子..

假设我想写饮料这个词，但我只开始打字 'beve'

所以输入会显示beve|rage | 字符是光标的位置，它将以灰色显示 rage 并且用户无法真正向前移动，因为它不是输入的真正一部分，但如果他单击类型，它实际上添加了丢失的后面到单词并将光标移动到完整单词的位置之后。

我什至不知道如何开始搜索如何实现这样的事情，因为每当我搜索术语 autocomplete 或 suggestion 时，它都会显示自动完成列表上的教程不是我想要的。

我试着玩了一下 matInput 和 mat-form-field，一个好的解决方案是即使在用户输入内容后我也可以显示占位符，因为它看起来有相同的内容或多或少地影响了我的需要。

所以如果我创建这个：

<mat-form-field>
  <mat-label>hello</mat-label>
  <mat-hint>test</mat-hint>
    <input matInput placeholder="foooooooo"/>
</mat-form-field>

所以当我专注于输入元素时，我看到灰色的 foooooooo 但是当我开始输入时，占位符消失了。如果仍然可以显示占位符，那么我可以动态地操作占位符，即使用户单击选项卡以完成输入中的实际单词并向前移动光标，我也可以更改 keypress。

还是不知道怎么离开占位符！因此，如果有人知道如何做到这一点......或任何其他方法来支持我需要的东西，那就太好了。谢谢

Answer 1

一种实施方式是

<div>
<input type='text' id='inText' (keyup)='lookupValues($event)'>
<span style='color:grey'>{{suggestion}}</span>
</div>

在ts文件中

lookupValues(event){
  // some logic 
this.suggestion = "suggested value"
}

Answer 2

编辑：

一个相对简单的解决方案是让两个 input 元素相互重叠，即它们应该放在相同的位置，具有相同的宽度和高度。然后使 backgroud-color 对两个元素或顶部元素透明，并将实际输入元素的 z-index 设置为某个大值 -

// actual input element
<input type="text" [(ngModel)]="value" (input)="inputChange()" (keydown.tab)="tabKeyPressed()"/>
// below one is used to fake a placeholder
// placeholderValue = value + suggestion (calculated using inputChange() method
<input type="text" class="autocomplete" disabled  [(ngModel)]="placeholderValue" />

请结帐this StackBlitz sample。

解决方案 2

您可以寻求 this answer 的帮助，它建议使用包装器 div 并操作 data-placeholder 属性。

解决方案 3 -

您可以有一个单独的 input 元素（称之为 B）。
次要元素 B 与您实际的 input 元素（称为 A）重叠，紧接在 A 中输入的文本之后开始。
要知道 B 的起始位置，有一个隐藏的 div（称为 C），它包含 input 元素 A 中存在的精确值。
然后在每个 keyup 事件上，根据输入找到建议并替换 B.属性中的占位符属性。
在 tab 事件中，如果存在建议，则替换 A 中的输入值。

下面是 html 的外观 -

<div id="app">
  // A
  <input type="text" name="email" class="custom-input" (blur)="clearPlaceholder()" [(ngModel)]="textInput" (keyup)="autoSuggest()" (keydown.tab)="fillAutocomplete()" />
  <div class="clearit virtual-text" >
    // C
    <div class='hidden-text'>{{ textInput }}</div>
    // B
    <input type="text" class="autocomplete" [placeholder]="autoCompPlaceholder"/>
  </div>
  {{autoCompPlaceholder}}
</div>

请看看this working StackBlitz example and also check out this article从哪里借来的

输入中的自动完成建议作为光标后的灰色字母，而不是 select 弹出窗口

autocomplete suggestion in an input as gray letters after the cursor, not as a select popup

angular

autocomplete

angular-material

mat-form-field

mat-input