Simple But Effective — Search Engine For HTTP Calls.
In this article, we will use RxJS to build a feature-rich search bar that returns real-time results. If you’ve never used RxJS before, this will be a good introduction for you. You will see how the RxJS library can turn a fairly complex set of requirements into code that is manageable and easy to read and understand.
It’s quite common in a modern application that you’re going to have to build a search bar that allows users to search a part of your database, if not all of the database.
This is what we call a real-time search bar or search engine, every search will require a request to the server and return the results. Making constant calls to the server, as we all know, is bad for our application performance. We don’t know how many times our users will be slapping away on the keyboard, making unnecessary requests to the server. Because of this, something as common as a search bar needs to have various checks in place.
Let’s begin.
Step 1: Set Up
For this example, I’m just using a simple JavaScript project.
Step 2: Search-Term Minimum
Step 3: debounceTime
Step 4: DistinctUntilChange
Step 5: Query the API
Step 6: Activate & Update the DOM
Step 7: Optional Add-Ons.
- 5 Advanced React Patterns.
#front-end-development #programming #javascript #web-development #rxjs
