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

如何解决输入中的自动完成建议，光标后为灰色字母，而不是选择弹出窗口

我使用角度10和角度材料来构建我的网站。

我想向matInput添加输入建议，但方法与matAutocomplete不同。 我不想显示一个列表，我想向一个单词显示一个建议，即用户已经在输入的最后一个字符之后以灰色字母形式输入了输入内容，如果按Tab键，它将自动完成该单词。>

示例..

让我说我要写饮料这个词，而我只开始输入'beve'

所以输入将显示beve|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上进行更改。

仍然不知道如何离开占位符！ 因此，如果有人知道如何执行此操作..或任何其他支持我需要的方法，那将是很好的。谢谢

解决方法

编辑：

一个相对容易的解决方案是使两个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 -

1. 您可以有一个单独的input元素（称为B）。
2. 此辅助元素B与您在A中输入的文本之后的实际input元素（称为A）重叠。
3. 要知道B的开始位置，请隐藏div（称为C），其中包含input元素A中存在的确切值。
4. 然后在每个keyup事件中，基于输入查找建议并替换B中的占位符属性。
5. 在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，并从借来的地方签出this article。

,

一种实现方式是

<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"
}