具有更改下拉选项的 Angular6 HTML 输入字段答案

【问题标题】：Angular6 HTML Input-Field with changing Dropdown Options具有更改下拉选项的 Angular6 HTML 输入字段
【发布时间】：2018-07-24 08:55:11
【问题描述】：

我想实现一个支持用户输入的 HTML5 输入字段。

想象一下用户必须输入的不仅仅是随机文本，他还必须遵循特定的语法：

rule: <expression> {<op><expression>}
expression: <Object>[<property>] is <State>
property: key=value
State: active | inactive | valid .....

我想到了一个状态机，比如如果用户进入这个状态，那么用户就处于状态 2，如果不是，他就处于状态 3，依此类推。

我发现了以下内容：

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

这几乎就是我所需要的。但正如你所看到的，它有点过于静态了。我想更新选项，它们应该随时出现，而不仅仅是第一次选择。

因此，如果用户开始一个新的表达式，那么选项会发生变化，然后在他进行一些输入后它们会再次发生变化。选项应该是可点击的，并且选项的值应该添加到前面的文本中。

我想到了一个解决方案，我只在输入字段下方添加一个标签来更改 innerHtml 但这似乎不是一个好的解决方案，有什么更好的主意？

【问题讨论】：

或者下拉菜单在任何时候都不应该显示。它应该在焦点位于输入字段上时显示。
您能否更准确地说明您想要做什么？前面的文字是什么意思？
Previous text: Server[secure=true] is active and --> 现在这里是带有选项的下拉列表，用户可以在其中选择一个 New Text: Server[secure=true] is active and Connection[ bidirectional=true] Connection[bidirectional=true] 是选择的选项

标签： html angular input options

【解决方案1】：

自己用下面的代码解决了：

component.ts:

export class Component {
  ruleInputFocused:boolean = false;
  selectActive: boolean=false;
  options: string[]; 

  constructor() {
    this.setState(0);
  }

  ngOnInit() {
  }

  changeSelective(value:boolean){
    this.selectActive= value;
  }

  changeFocused(value:boolean){
    if(this.selectActive == false){
      this.ruleInputFocused = value;
    }
  }


  setState(stateNumber: number){
    this.options = [];
    this.positionCounter = -1;

    if(stateNumber == 0){
      this.options.push("(");
      this.options.push("Object[key=value] ");
    }
  }

  optionClicked(i){
    this.ruleText = this.ruleText.concat(this.options[i]);
    document.getElementById("ruleInput").focus();
  }




  positionCounter = -1; 

  @HostListener('document:keydown', ['$event'])
  public handleKeyboardEvent(event: KeyboardEvent): void {
    if(this.ruleInputFocused){
        if(event.key == 'ArrowDown'){
          this.positionCounter++;
          if(this.positionCounter>this.options.length -1){
            this.positionCounter = 0;
          }
          console.log(this.positionCounter);
        }else if(event.key == 'ArrowUp'){
          this.positionCounter--;
          if(this.positionCounter<0){
            this.positionCounter = this.options.length -1
          }
        }else if(event.key == 'Enter'){
          if(this.positionCounter != -1){
            this.optionClicked(this.positionCounter);
          }
        }
    }
  }

}

HTML：

<div class="mainContainer">


  <div class="ruleInputDiv">
        <div class="divLabel">Rule: </div>
        <input id="ruleInput" type="text"  autocorrect="off" 
          (focus)="changeFocused(true)" (focusout)="changeFocused(false)" [(ngModel)]="ruleText" >
        <button id="ruleInputCheckButton" (click)="checkRule()">Check</button>

  </div>
  <!--[hidden]=!ruleInputFocused-->
  <div class="optionsDiv" id="optionsDiv" [hidden]="!ruleInputFocused">
      <div class="singleOption" *ngFor="let option of options; let i = index" 
        [ngClass]="{selected: positionCounter===i}" (click)="optionClicked(i)" (mouseenter) ="changeSelective(true)" (mouseleave) ="changeSelective(false)">
          {{option}}
          <div class="verticalBorderDiv"></div>
      </div>
  </div>


</div>

CSS：

【讨论】：