如何創建自動完成 - Angular 5

Question

我正在嘗試創建自動完成功能，但還不知道如何去做。 我有一個本地 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>

我想我不能這樣做，因為我在后端沒有實際的searchValue ？ 我怎么能只用這個 json 文件呢？

編輯：我編輯了我的問題，這是我嘗試過的，但它不像我想要的那樣工作。 我嘗試瀏覽數組中的每個對象作為響應並查看值是否正確

編輯2：用這個管道解決了這個問題：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'restaurant' })
export class SearchPipe implements PipeTransform {
  transform(restaurants: any, searchValue: any): any {
    if(searchValue == null) return restaurants;

    return restaurants.filter(function(restaurant){
      return restaurant.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
    })
  }
}

Answer 1

我相信您所追求的是通常被稱為“Typeahead”的東西 - 您在搜索框中輸入內容，並使用您輸入的內容與 JSON 數組中的項目之間的相似性，搜索框會嘗試“建議”你在打什么。

我建議使用來自ngx-bootstrap的預制 Angular 組件庫。 在這個庫中有一個 Typeahead 組件。

我在我的大部分 Angular 項目中都使用了這個庫 - Typeahead 組件的文檔應該足夠詳細以幫助你。

Answer 2

我會怎么做是：

一個輸入，一個 div（一開始是空的，但一旦你開始輸入它就會被填滿）。

一旦您開始輸入輸入，您就可以從輸入中獲取值，然后使用該值過濾您的餐廳，找到包含您輸入值的所有值。

所以，像這樣：

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

和你的 .ts

filterValues() {
 this.yourNewArray = restaurants.filter(restaurant => restaurant.includes(inputValue);
}

也許這只是一個偽代碼，我還沒有測試過。 我只是希望能讓你走上正軌:)

Answer 3

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])
    }
    
  }

HTML文件

<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>

享受