Angular | Simple TypeAhead Autocomplete Suggestion Search implementation in Angular 6+ Applications

In this tutorial, we will implement a very simple Autocomplete feature which is also known as TypeAhead or Suggestion search bar. Typeahead is basically an Input field where user can type and get matching results in a dropdown list to select from.

Adding a suggestion or Autocomplete field is useful where we have a large data to show up which can’t we be accommodated in tradition select dropdowns. Autocomplete lists really optimize DOM structure by preventing a dump of large data on the client-side.

We already discussed Autocomplete using Angular Material and Bootstrap but if there is a quick need of time and we don’t want to get into large libraries integration then NgxTypeahead solves the purpose very well.

Let’s get started!

First, we will start with a new Angular project here build using the latest Angular CLI version v7.3.8. You can have the latest version of Angular CLI check this tutorial on updating it.

Install Ngx-TypeAhead NPM package

Import NgxTypeaheadModule in the app.module.ts file as shown below

Theme styling is easy with bootstrap as Typeahead was originally created by Twitter. Just add the bootstrap.css file in index.html

Or you can simply add following CSS style in the styles.css file

 

Next, adding typeahead in the application is very easy.

Simple Typeahead with Local Data List

In the component template, add the following Input form field control with ngxTypeahead directives and some other required attribute properties.

[taList]: Items data list which will populate when a user types.

(taSelected): Emit event when an item from suggestions is selected.

In the app.component.ts file add the following code

Typeahead with Custom Template

If you have a list of an object then we show custom suggestion list using Angular’s ngTemplate directive as shown below.

[taItemTpl]: Takes the template variable defined on <ng-template></ng-template>
And custom template as follows

In component class, add the following object myLocalDataList with on select event handler selectedTempStatic().

Server Side request for Typeahead suggestions

In real-world applications, we always an API endpoint to get results to show in suggestions as a user types the query.
NgxTypeahead neatly handles server-side responses with debounce feature already added which earlier we added using custom RxJS operators in Angular Material Autocomplete.
In template add following Input control

Here we have  following  properties

[taUrl]: URL of remote API url/ end-point to get results.

[taParams]: Parameters which will be sent with the above API request.

In component, class add the following

For adding Debounce for server request add [taDebounce] property. Debounce prevents multiple API calls on every keypress and only make calls if the next keypress event is fired after a given time value.

Conclusion: NgxTypeahead package is a stand-alone Autocomplete module which is free from any dependencies. It can be a good option if you are not looking for Angular Material like UI frameworks.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
macoratti Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
macoratti
Guest
macoratti

Hi,
I’m new using Angular and when I try follow this article I’m getting the following error:

Resource blocked due to MIME(text/html) type mismatch (X-Content-Type-Options: nosniff)