Jul 14, 2020
Make Google Search in next Project— Angular 10
SEARCH is one of the basic functionality that the web has to offer. It looks quite simple, just a box with a button that responds to the request but actually a lot of things happen behind the scene.
GitHub link at the bottom of the post.Code Snippet at last.
Lets see how our normal search works to get a clear understanding and make sure developers irrespective of their experience can be on same page.
Basic Search.
The objective of this search is to throw back records, irrespective of their positioning.
- Post 1 with title: “Lion is the King of Jungle”.
- Post 2 with title: “Jungle King is the best movie”.
If the search term is — Jungle King , it will return both the records as both of them have either the term Jungle or King. That’s how our traditional search works. It will split and break the input and check that word individually with all the Post and than return all statement that matches the word Jungle or King
Dynamic Search
Here the objective is to find the records matching the phrase. You usually add them in quote (“ ”). This Quote can act as separator and consider whatever in-between the words as a phrase.
If the search term is — “Jungle King”, it will return just Post 2. as that is the only post which has the words Jungle and king as it is, as a phrase.
Benefits of Dynamic Search.
a. It is relatively Faster.
b. It allows wider range of search options as not only you can search word by word but now as phrase by phrase, thus when the data gets complicated it can come handy.
Logic behind the scene irrespective of language xD.
Step 1. Check if the input value has “.
Step 2. If condition, if quote mark is true than it is Dynamic Search else it is Loose Search.
Step 3. Dynamic Search
a. Split the input into 3 sections, one before the quote, one which contains inside the quote and another which contains last part of the string.
b. The content you want to search is on second section, thus that will act as the phrase to search. you need to iterate it with the entire record you want to search with and than you have to just push it to result array.
Step 3. Loose Search.
a. You don’t need to split here, instead we just iterate through all the words in the input.
b. Once iterated, you need to compare does it include in the array so another loop in a loop and check of the input value word is in the alterable word, with a counter you can keep a charge to check if the word is matching the proper tittle and not anything else of that object.
Step 4. Throw back, once search is performed, you have to direct back to the object as it was before and display it.
CODE SNIPPET
