CODEWITHSUNDEEP
angular
Nemanja G
Nemanja G

Reputation: 1850

How to create Autocomplete - Angular 5

I am trying to create autocomplete but can't get how to do it yet. I have a local json file with an array which I should search through. I listed all the data from it, but now I dont know how to do it. This is what I tried:

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

  constructor(private _http: Http) {}

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

and this is my 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);
    }
  );
  }

In my html, I put:

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

I guess I can't do it like this because I don't have an actual searchValue on backend? How can I do it with only this json file?

EDIT: I edited my question, this is what I tried, but it doesnt work like i want it. I tried going through every object in my array in response and looking if the value is correct

EDIT 2: Solved it with this pipe:

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

Upvotes: 2

Views: 11288

Answers (3)

Rizwan Ali
Rizwan Ali

Reputation: 50

TS File

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 File

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

Enjoy

Upvotes: 0

filipbarak
filipbarak

Reputation: 1905

How I would do it is:

One input, one div (empty at first, but it get filled once you start typing in the input).

Once you start typing in the input, you take the value from the input, and you use that value to filter through your restaurants, finding all the values which include your input value.

So, something like:

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

and your .ts

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

Maybe this is just a pseudo code, I haven't tested it. I just hope to bring you on the right track :)

Upvotes: 3

Roy D. Porter
Roy D. Porter

Reputation: 159

I believe what you're after is something often referred to as "Typeahead" - where you type into a search box, and using the similarity between what you have typed, and items in your JSON array, the search box attempts to 'suggest' what you're typing.

I recommend using a library of pre-made Angular components from ngx-bootstrap. Amongst this library is a Typeahead component.

I use this library in most of my Angular projects - the documentation on the Typeahead component should be detailed enough to help you.

Upvotes: 3

Related Questions