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>

享受

如何创建自动完成 - Angular 5

3 个答案: