Angular 如何创建自动完成-角度5

我正在尝试创建自动完成，但还不知道如何创建。我有一个本地json文件和一个数组，我应该在其中搜索。我列出了所有的数据，但现在我不知道怎么做。这就是我所尝试的：

private _url = 'assets/json-data/restaurants.json';

  constructor(private _http: Http) {}

     getRestaurants () {
    return this._http.get(this._url)
      .map((response: Response) => response.json());
  }

这是我的app.component.ts：

  restaurants: any[] = [];
  filteredRestaurants: any[] = [];
  searchValue: string;

  constructor(private restaurantsService: RestaurantsService){}

    ngOnInit() {

  }

  search() {
      this.restaurantsService.getRestaurants()
  .subscribe(
    (response) => {
      this.restaurants = response.results;
      for (const r of this.restaurants) {
        if (r.name.indexOf(this.searchValue) > 0) {
          this.filteredRestaurants = response.results;
        } else {
          this.filteredRestaurants = [];
        }
      }
      // this.restaurants = response.results;
    },
    (error) => {
      console.log(error);
    }
  );
  }

在我的html中，我将：

<div class="search-input-box">
    <input type="text" [(ngModel)]="searchValue" (keyup)="search()" class="search-input">

    <div *ngIf="filteredRestaurants && filteredRestaurants.length > 0" class="ac-list">
      <ul *ngFor="let r of filteredRestaurants">
        <li>{{ r.name }}, {{ r.address.city }}</li>
      </ul>
    </div>
  </div>

---

我相信你所追求的是通常被称为“Typeahead”的东西——你在搜索框中键入内容，并利用你键入的内容与JSON数组中的项目之间的相似性，搜索框尝试“建议”你键入的内容

我建议使用来自的预制角度组件库。在这个库中有一个Typeahead组件

我在大多数Angular项目中都使用此库-有关Typeahead组件的文档应该足够详细，以帮助您。

我将如何做到这一点：

一个输入，一个div（起初为空，但一旦开始输入，它就会被填充）

一旦开始输入，就从输入中获取值，并使用该值筛选餐厅，找到包含输入值的所有值

比如说：

<input #inputValue (onkeyup)="filterValues()" />
    <div *ngIf='yourNewArray'>
    <span *ngFor="item of yourNewArray">
      {{item}}
    </span>
    </div>

---

也许这只是一个伪代码，我还没有测试过。我只希望让你走上正轨：）

TS文件

public filterIndustry(event){
   let filter =  event.target.value.toString().toUpperCase();
   let data = [];
   if(filter == ''){
    this.Desired_Industry = Desired_Industry;
    return
   }
    for (let i = 0; i < this.Desired_Industry.length; i++) {
    if(this.Desired_Industry[i].toString().toUpperCase().indexOf(filter) > -1){
      data.push(this.Desired_Industry[i])
    }
    }
    this.Desired_Industry = [];
    for (let i = 0; i < data.length; i++) {
      this.Desired_Industry.push(data[i])
    }
    
  }

公共过滤器行业（事件）{
让filter=event.target.value.toString（）.toUpperCase（）；
让数据=[]；
如果（过滤器=“”）{
this.Desired_Industry=Desired_Industry；
返回
}
for（设i=0；i-1）{
data.push（这个行业[i]）
}
}
这是理想的工业=[]；
for（设i=0；i

HTML文件

public filterIndustry(event){
   let filter =  event.target.value.toString().toUpperCase();
   let data = [];
   if(filter == ''){
    this.Desired_Industry = Desired_Industry;
    return
   }
    for (let i = 0; i < this.Desired_Industry.length; i++) {
    if(this.Desired_Industry[i].toString().toUpperCase().indexOf(filter) > -1){
      data.push(this.Desired_Industry[i])
    }
    }
    this.Desired_Industry = [];
    for (let i = 0; i < data.length; i++) {
      this.Desired_Industry.push(data[i])
    }
    
  }

{{工业}

---

享受

我知道这个，我自己也在一个项目中使用过它，但现在我想创建我自己的typeahead（自动完成，w/e它的名字），谢谢你的尝试，然后让我再试一次。您的餐厅服务正在对.JSON文件进行HTTP调用-这不会神奇地搜索文件中的数据并返回过滤结果。餐馆服务最好从JSON文件加载数据并将其存储到数组中。然后，服务将使用searchValue对数组对象执行筛选。关于您的评论

//这里不能使用ngModel

，您肯定需要在那里使用ngModel。当模型发生更改时，您需要调用restaurantsService.GetRestaurants。需要注意的是，ngBootstrap typeahead只接受显示字符串列表，不支持对象列表。对于angular 5，您必须使用：让您的新数组的项并将onkeyup更改为keyup

public filterIndustry(event){
   let filter =  event.target.value.toString().toUpperCase();
   let data = [];
   if(filter == ''){
    this.Desired_Industry = Desired_Industry;
    return
   }
    for (let i = 0; i < this.Desired_Industry.length; i++) {
    if(this.Desired_Industry[i].toString().toUpperCase().indexOf(filter) > -1){
      data.push(this.Desired_Industry[i])
    }
    }
    this.Desired_Industry = [];
    for (let i = 0; i < data.length; i++) {
      this.Desired_Industry.push(data[i])
    }
    
  }

<input type="text" (keyup)="filterIndustry($event)" matInput placeholder="Search">
 <div class="dropDown-Options" *ngFor="let industry of Desired_Industry">
  <mat-option [value]="industry">
  {{ industry }}
  </mat-option>
 </div>