0

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

我想以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即使用户单击选项卡以完成输入中的实际单词并向前移动光标，我也可以更改。

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

4

2 回答 2

3

编辑：

一个相对简单的解决方案是让两个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" />

请查看此 StackBlitz 示例。

解决方案 2

您可以利用这个答案的帮助，该答案建议使用包装器div并操作data-placeholder属性。

解决方案 3 -

  1. 您可以有一个单独的input元素（称为 B）。
  2. 这个次要元素 B 与您的实际input元素（称为 A）重叠，紧接在 A 中输入的文本之后。
  3. 要知道 B 的起始位置，有一个隐藏的（称为 C），其中包含元素 Adiv中存在的确切值。input
  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>

请看一下这个 StackBlitz 工作示例，并查看这篇借用的文章。

于 2020-09-18T18:40:41.460 回答
0

一种实施方式是

<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"
}
于 2020-09-18T17:49:24.427 回答