问题描述
我希望为开始输入的每个单词实现一个具有自动完成功能的文本框。根据上下文,每个单词都来自不同的来源。基本上,它是大多数现代IDE中都存在的功能。
我用VS代码创建了一个视频,以说明我在说什么:https://recordit.co/mk1yY0yBy9
是否有可用于Angular的库来提供这种功能?
解决方法
我想说您可以自己实现一个不错的小部件,因为我没有设法找到这样的软件包,所以我创建了一个非常简单的开始代码,可以完成您想要的事情。 (数据另存为json对象)工作prototype。
模板:
<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();
}