MongoDB Atlas Search to Easily Find Your Data | Search & Autocomplete Implementation | Jumpstart
Rate this video
00:00:32Introduction to MongoDB Atlas Search
00:01:40Recap of MongoDB Jumpstart Series
00:03:46Setting Up MongoDB Atlas Search
00:04:49Testing the Search Index
00:06:53Creating a Realm Function for Search
00:11:02Testing the Search Function in Realm
00:13:05Implementing Search in the Front End
00:17:09Setting Up Autocomplete Index in Atlas
00:38:37Creating Autocomplete Function in Realm
00:42:48Integrating Autocomplete in the Front End
The primary focus of the video is to teach viewers how to implement search and autocomplete features in an e-commerce application using MongoDB Atlas Search and MongoDB Realm serverless functions.
🔑 Key Points
- MongoDB Atlas Search offers a powerful search engine with features like typo tolerance, autocomplete, filters, facets, and custom scoring.
- The video demonstrates setting up search indexes, performing fuzzy searches, and integrating search functionality into the front end of an application.
- Autocomplete functionality is implemented to provide real-time suggestions as users type in the search bar.
- The tutorial includes step-by-step instructions on creating serverless functions in MongoDB Realm to handle search queries.
🔗 Related Links
- https://bit.ly/3kZTE4S
- https://mdb.link/free-jnxnhbTO2RA
- https://mdb.link/community-jnxnhbTO2RA
- https://bit.ly/3huMq6z
- https://twitter.com/codestackr
- https://youtube.com/codestackr
- https://linkedin.com/in/codestackr
- https://instagram.com/codestackr
- https://tiktok.com/@codestackr
- https://bit.ly/3bpg1Z1
- https://bit.ly/2LjtNBZ
- https://bit.ly/3fH87gR
- https://bit.ly/3fEaIsd
- https://bit.ly/2SY9w90
- https://bit.ly/3bn9bDv
- https://bit.ly/2I8VCi5
- https://bit.ly/3fHoqdJ
Full Video Transcript
[Music] have you ever wondered how searches work on websites what about autocomplete in this video i'll show you how to implement search and autocomplete with mongodb atlas hi i'm jesse i'm a senior developer advocate at mongodb welcome back to the mongodb jumpstart series in the previous videos of this series we created an atlas cluster connected to our cluster using the mongodb vs code extension and the mongodb compass gui imported some data to use in our ecommerce project that we're building built out our front end using nexjs and tailwind css and used mongodb realm serverless functions to bring our data into our application if you missed those videos feel free to go back and watch them the link to the playlist is in the description below but if you're already familiar with mongodb atlas and you want to learn more about mongodb search then you're in the right place in this video we're going to implement search and autocomplete in our ecommerce app mongodb atlas search makes it easy to build fast relevant full-text search capabilities on top of your data in the cloud available exclusively with mongodb atlas with search you get a leucine-powered search engine typo tolerance with fuzzy searching autocomplete filters and facets custom scoring and much more so let's see how to set it up alright over here in our atlas dashboard we're going to go to browse collections and then over to search and let's create a search index for this example we're going to use the visual editor and then let's name this search products and we're going to expand our database store and select products this is going to create a default search index for our products collection so let's create the search index we can test our index by clicking query so in here by default we'll see all of our documents let's enter a query here so we'll say category is going to be equal to hat and let's search [Music] and so now it's only going to return the one document that is in the category of hat and if you want more details you can click this and you'll see it was in the category of hat and the name of it is the npm hat if you want to view the query syntax you can click this button here view query syntax and this shows you exactly how to format this search using the mongodb api you can also export to a specific language so if you need python no java c-sharp or ruby you can select that so let's create a realm function that utilizes this search index so we're going to go up here to realm and let's go back into our realm products application that we created in the previous videos and then we'll go to functions and let's create a new function and we're going to call this search products and then in our function editor so we will have an argument or a search term that we'll have to utilize so let's delete everything from in here right now the first thing that we'll need to do is get our collection it's going to equal context dot services atlas and then our database of store and then the collection of products so now we have our collection here next we'll create our pipeline which is going to be an array and then within that we're going to have an object which is going to be search so again we saw this example just a minute ago when we tested our search index alright so within our search we're going to use our index which is the one that we just created search products index and then for our text we're going to pass our query which is our argument which will be the search term that we're going to pass into our function and then for the path we're going to select a wild card which allows us to search in any field of any document and then lastly we're going to return our collection.aggregate and then pass in our aggregation pipeline all right so let's save draft and then we can go to our console and test this out so instead of hello world as our argument let's say hat and let's run this and we should have returned our object which is our npm hat all right so if we go back here and let's search for let's say hoodie i think there should be two hoodies so let's run this and so now we have the c plus plus hoodie and the javascript hoodie right so let's review draft and deploy and go down to the bottom here and deploy all right so now we're ready to use this in the front end of our application alright so back in our front end application i have our header component open and let's scroll down to our input we have this search input and it doesn't do anything right now so we're going to select this and use emit to wrap this with a form tag and then instead of action let's say on submit and we're going to say handle submit and then we'll have a on change and that's going to equal a function and in this function we're going to call set search term and we'll create this use state in just a minute so we're going to set our search term is going to equal e dot target dot value and then we're going to set our value to equal search term all right so let's go back up to the top here and let's create that so we'll just use one of these as an example so we'll say search term and then set search term and the initial state is going to be an empty string all right so then we need to create that handle submit function so let's create that here we'll say const handle submit and this function will have an event so we'll create an arrow function there and then we're going to say e dot prevent default that's going to prevent the default behavior of submitting the form and refreshing the page all right so now we're going to use router so we need to import that so let's go up here and let's import and that's destructure use router and that's from next router alright and then in our header we need to define our router so we'll say const router is going to equal use router by using this we can change our path so we'll say router dot push and this accepts an object so we'll say path name and that's going to equal search slash and then we'll use our search term and then after that we want to reset our search term so let's say set search term and we're going to set that back to an empty string all right so now we need to create this path search slash and then our search term alright so let's create that so under pages we'll create a new file and we'll create the folder structure all at one time so it's going to be search slash and then in bracket square brackets we're going to say term dot js all right so term that's going to be our slug that's going to be the search term that's passed to it so for this we can actually use a lot of the same stuff from our products index let's go to products index and let's just copy this and then under term paste that and then under products and then id we need a few things out of here so we'll need our query and our router so let's get use router we'll need our query from our router and then instead of all products this is going to be our searched products so let's change this function to search products and then instead of all products let's just rename this to search products as well and then we need to pass into this our query which is going to be query dot term all right and then everything else will be the same let's just change this from all products to let's say products found all right so let's start up our server so we'll say npm run dev and this opens up on localhost let's open that up all right so now when we go into search let's search for hat and there we go we have our npm hat if we search for java notice that it doesn't refresh so what we need to do is check to see if we have query term and if we do have a query term then we'll run this code and we also need to in our use effect watch our query so every time our query changes it's going to run this again so let's save that and let's go check it out so now if i search for hat it should update there we go and i can search for mongodb and there's that but now watch if i search for without the db you'll see that we get zero products returned also let's say if i search for java i'll get the java t-shirt but what if i misspell it and i search for jiva not going to get any products found so we can fix those issues by turning on fuzzy searching so back in our realm functions we'll go to our search products so now here after the path let's add another parameter we'll say fuzzy and that is going to accept an object and we can just pass an empty object to accept all of the defaults let's do that we'll save draft and review draft and deploy and then deploy this should just take a second and then let's give it another try all right so there's nothing that we need to change in the code let's just go back here and we still have jiva in here let's just refresh and now we have java let's search for without the db and there's our mongodb t-shirt let's say we search for java scrapped and there's our javascript hoodie nice all right next we want to implement some autocomplete so as i'm typing something i want some suggestions as i'm typing so the first thing that we'll need to do is set up a new search index so we'll go back and let's go to atlas and let's go back to our collections and search and let's create a new index this time we're going to use the json editor all right so let's call this autocomplete as products autocomplete products all right so by default our mappings are dynamic we're going to change this up all right so this time for our mappings we're going to set dynamic to false and then in our fields we're going to search specifically in the name field so now inside the name field we're going to add fold diacritics to false max grams to 7 min grams to 3 tokenization set the edge gram and type set to autocomplete i'll put a link to the docs in the description below if you want to dig further into these settings but these are the settings that we're going to use for this example all right also be sure to select the database and then select the products collection all right then we'll hit next and create the search index all right while this index is building let's go back over to realm and create our serverless function that will utilize this index all right back in our products app let's go to functions and let's create a new function we'll call this one search autocomplete and then in our editor i'll just paste this in and then we'll go over it so again we're going to get our collection and that is our products collection and then we're going to create this pipeline all right this pipeline is going to have several stages in the first stage we're going to search so we're going to use our new index that we just created autocomplete products and then we're going to set our autocomplete so in here our query is going to be the argument that we pass the path is the field that we're going to look in and that's name and then token order will set to sequential we're going to limit this to 10 documents and then we're going to project the name so we only want the name it's actually going to return the id as well by default and if you for some reason don't want the id then you would have to set underscore id equal to zero if you didn't want the id but we do want the id so we just want the id and name and then we're going to return this aggregation pipeline all right so let's save draft and review and deploy go down here and deploy all right so let's go back into the front end and utilize this autocomplete all right so back in our header component the first thing that we'll do is import use effect we're going to be using that as well as our realm web and then we'll create a state or autocomplete and set autocomplete initially this is going to be an empty array and then we'll have our use effect so we're going to say if search term dot link so if we have a search term then we're going to use the same functionality that we've been using before we'll create a connection to realm and then we're going to search autocomplete using our search autocomplete and passing in the search term then we are going to set autocomplete and then if we don't have a search term then we're going to set autocomplete to an empty array again right and then we're going to watch search terms every time search term changes then it's going to run this so this is going to allow us on every keystroke to run our autocomplete function all right we're also going to set up a another function here that's called handle select handle select is going to accept an id we're going to set search term to blank and then do a router.push just like we did before here to products slash id so when we select one of the autocomplete suggestions it's going to take us directly to that product all right so then let's go down here let's implement the autocomplete portion of the form so right here after our input and after our form we're gonna say autocomplete.length is greater than zero so if it's greater than zero then we're going to create a ul and then within this ul we're gonna autocomplete.map so each item within autocomplete we're going to return an li and the li is going to have the key of item id and then on click is when we're going to handle our select and we're passing in the item underscore id all right and then here we're going to display the item name all right so let's save that and give it a try all right so in search let's type java and we're getting some suggestions java t-shirt or javascript hoodie if i go back let's type in m-o-n-g and there it is mongodb t-shirt let's just type in shirt and we're going to get up to 10 selections remember we limited it to 10 right and so if i go ahead and click on one of these it should take us to our product page there we go nice mongodb atlas search is an amazing feature exclusive to mongodb atlas in this video we were able to set up search indexes perform fuzzy searches set up autocomplete and tie all of this into the front end of our application very easily in the next video we're going to implement some advanced functions to query our database by category and incorporate pagination so be sure to watch for that the link to the series playlist is in the description below if you have any questions or feedback visit our community forums at community.mongodb.com our community and employees are there ready to answer your questions if this video was helpful be sure to like and subscribe [Music] [Music] you
Rate this video