• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 63
  • Last Modified:

Building a typeahead style filter (similar to AngularJS) with Angular 2

Hello - I am very new to Angular 2 and am trying to figure out some things about input boxes/filters, etc.

I'm not seeing a lot of good examples online regarding how to build a custom search filter/dropdown in Angular 2...similar to a typeahead style filter in AngularJS.

....Where when a user starts entering text into an input box...a drop-down appears and shows all values in an array/table that match the text that has been entered.

I did find an example on GitHub...but it is marked as depreciated.

With me being so new to Angular in general...I am not sure I am searching for the correct terms either(?).

How would I modify the input box in the code below to include that functionality? So instead of the table itself starting to limit things as text is entered into the filter...the search box would dropdown so values that match what is being typed would be displayed...and the user can select the value from the drop-down list if they want...to have it then populate the table? Any assistance you can provide is greatly appreciated.


app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>
<div>

  <div>
<input placeholder="Enter Search Value" [(ngModel)]="searchText" />

   </div>
<hr>
  <table class="table">
  <ng-container *ngFor="let user of users | search:searchText">
      <tr>
        <th>First Name</th><td>{{user.firstName}}</td>
        <th>Last Name</th><td>{{user.lastName}}</td>
      </tr>
      <tr>
        <th>Job</th><td>{{user.job}}</td>
        <th>ID</th><td>{{user.id}}</td>
      </tr>
    </ng-container>
</table>
</div>

Open in new window



app.component.ts

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'CH Table play';

  users = [
    {
        "firstName": "Clark",
        "lastName": "Kent",
        "job": "Reporter",
        "id": 20
    },
    {
        "firstName": "Bruce",
        "lastName": "Wayne",
        "job": "Business Owner",
        "id": 30
    },
    {
        "firstName": "Peter",
        "lastName": "Parker",
        "job": "Photographer",
        "id": 40
    },
    {
        "firstName": "Tony",
        "lastName": "Stark",
        "job": "Business Owner",
        "id": 25
    }
]
}

Open in new window

0
Cynthia Hill
Asked:
Cynthia Hill
1 Solution
 
Cynthia HillLead ConsultantAuthor Commented:
Hummm...tried a few additional search terms and found the github sample at the link below.

https://github.com/oferh/ng2-completer

I will play with that code later tonight to see if I can get it to work for me.

Wish me luck :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now