时间戳

首页 > 解决方案 > 任何带有 Angular 自动完成功能的文本框库？

angular - 任何带有 Angular 自动完成功能的文本框库？

问题描述

我希望为我开始输入的每个单词实现一个带有自动完成功能的文本框。根据上下文，每个单词都来自不同的来源。基本上，它是大多数现代 IDE 中存在的功能。

我从 VS 代码创建了一个视频来说明我在说什么：https ://recordit.co/mk1yY0yBy9

是否有任何库可以与 Angular 一起使用这种功能？

标签： angularautocompletetextbox

解决方案

我想说你可以自己实现一个不错的小部件，因为我没有找到这样的包，我创建了一个非常简单的启动代码，可以满足你的要求。（数据保存为 json 对象）工作原型。

模板：

<input [(ngModel)]="selectedLevel" (keyup)="changed()" />
<div *ngFor="let option of currentOptions" (click)="setOption(option)">
  {{option}}
</div>

脚本

root = { 
  array: {
    remove:{
      element:{}
    }
  },
  args: {},
  other: {}
};
selectedLevel = '';
currentOptions = []; 

changed(){
  let levels = this.selectedLevel.split('.');
  let crawl = this.root;
  while(levels.length > 0){
    let current = levels[0];
    let test = crawl[current];
    if(test) crawl = test;
    this.currentOptions = Object.keys(crawl).filter(x=>x.includes(current));
    levels.shift();
  }
}

setOption(option){
  let index = this.selectedLevel.lastIndexOf('.');
  if (index == -1){
    this.selectedLevel = option;
  } else {
    this.selectedLevel = this.selectedLevel.substring(0,index) + '.' + option;
    }
  this.changed();
}

推荐阅读