Angular 11.2.10 — treat your e-business to a brand new, custom-made search function!
Custom search is one of the nuts-and-bolts technologies of the modern web that we all have become used to up to the point of not even noticing it anymore. And yet, it is an indispensable part of all major web marketplaces out there. See for yourself: eBay, Amazon, AliExpress — all utilize custom search as a key step in connecting customers with their desired product.
You don’t need to be a global mogul to use custom search functionality on your website — even smaller businesses can greatly benefit from the improved product visibility and the tailored customer engagement that such a function offers.
The great thing about smart search technology nowadays is that it’s beautifully customizable: you can add and tune virtually anything you can think of to go along with your own search function: images, links, comments, categories, fonts — long story short, truly anything you can think of.
A good custom search will invigorate your marketplace UX, shorten the customer purchase cycle by guiding the user along the desired route and, ultimately, improve your business metrics by increasing the conversion rate. If you are wondering how UX can impact your business in a more comprehensive way, watch Goran Paunovic, the creative director of a Chicago-based creative agency specialised on branding, graphics, UI/UX, and Web design, where he’ll explain UX and its impact in more detail: “The Bottom Line: Why Good UX Design Means Better Business”. As you see, custom search is much more than a neat gadget; it promotes and filters the content with the ultimate goal of creating an enriching user journey resulting in increased sales.
To illustrate this, here’s a custom search function we designed and built for one of our clients.
The implemented search engine improved our client’s conversion rate by more than 10% in one month only.
After talking about the necessity of having a sophisticated search function on your website, you may be wondering how to create and implement your very own search solution.
Here’s our recipe to your success:
- Installing Angular
- Installing npm packages to enable the use of external libraries
- Custom search setup and implementation
Feel free to skip the first part if you have a general understanding of Angular.
1. What is Angular? Angular is a framework developed by Google that enables you to quickly create client applications with ease. To install and use Angular, you’ll need to do the following:
- Install node.js and npm. There’s a wealth of links on how to do that, such as https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
- The terminal command npm install -g @angular/cli installs Angular on your PC;
- The terminal command ng new your-project-name creates a project;
- The terminal command cd your-project-name / npm start starts a local server at http://localhost:4200/
Awesome! You’ve created your first app!
2. In the example below, we’ll be using a library called mdb-angular for styles, but you can, of course, use other libraries too- or, to go fancy, write your own styles!
Once we’re done with the mdb-angular installation, we then add the input and styles to app.component.html and app.component.scss, which ultimately creates a block for element and input storage.
app.component.html
app.component.scss
Having accomplished steps one and two, we finally can transition to the main part: creating and implementing your custom search function in app.component.ts.
3. To begin with, we are going to create three variables — these will be our “new Subject ():” from Rxjs.
Rxjs is a reactive programming library, which lets you structure your work with events and asynchronous code as well as write complex logic declaratively.
Subject is a “special” type of observables we use to translate values to several subscribers.
You can learn more about subjects by digging into the official Rxjs documentation at https://rxjs-dev.firebaseapp.com/guide/overview
public searchInput$ = new Subject();is a variable we subscribe to in order to get data from the input.
public container$ = new Subject();we use this variable to subscribe to the input activity.
private destroy$ = new Subject();we use this variable to unsubscribe from our Subject() in the ngOnDestroy life cycle.
Next, we implement the subscription of the first Subject() in ngOnInit, which is a life cycle in Angular that lets us work once the component is initialized and implement the unsubscribe right away. After that, we add a keyup to the input to add the input symbols to our subscription using the “next method” from our Subject.
app.component.ts
app.component.html
Now, what on Earth is pipe?
pipe is a method in Rxjs that enables us to work with new data before they’re actually displayed. In this case, we’ll need to unsubscribe from our subject when we leave the page: “takeUntil(this.destroy$)”.
Next, we use a method from Rxjs to produce a 1-second delay as the user might still be typing: debounceTime(1000).
Using “distinctUntilChanged()” will only give us the data that has been modified.
Let’s check the data we entered inside the subscribe section.
Next, we create two arrays.
The first array will contain mock data that we’ll be searching for; the second array will be displayed in html. This is a good time to refresh our styles, and add styles to the founding elements.
… adding styles to .container-fluid, input, and our list….
app.component.scss
app.component.ts
app.component.html
Here, we are using *ngIf structural directives to check for the existence of data for displaying, and *ngFor to scan over the array and display its elements.
app.component.ts
We’ve just made a new function that accepts the entered data and filters it by running the data against the elements of the existing data array. For the best results, we use toLowerCase() to transform all the data into lower case and use “includes” to check if the data we entered exists in the array.
Not bad, eh? But there’s a problem: we can’t hide these data if we don’t need them right away because of the “check length condition” in the array. To hide these elements, we’ll use the second subject:
public container$ = new Subject();We subscribe to it in ngOnInit and track the focus on the input itself, if it is active:
(focus)=”container$.next($event)”We display the data if the user clicks/taps on any part of the screen; outside the block, we hide it using:
(focusout)=”container$.next($event)”We will also need two new variables: one will display a notification if no data are found
public exist = true;The other one will display the data if there is a focus
app.component.html
Note that in addition to all the things described above, we’ve also added “tabindex=1’”. We will need this parameter to focus on the list block.
app.component.ts
event.relatedTarget allows us to click on the found data and perform various functions.
event.type === ‘focus’ is used to display data when the user clicks on the input — that is, if there is any data to display.
Congratulations! Now you’ve got yourself a custom search function you can tailor the way it works best for your needs as well as to optimally suit your needs and styles individually — and it’ll work like a charm every single time!
The complete code is available on GitHub.
We’ll be happy to hear any feedback or improvement suggestions! Feel free to contact us!
