Create a Search Bar in Next.JS 13 and MongoDB

hello and welcome to the channel let's first start by creating a search space so I will create a folder called source inside I will create a pastel JS file so you will have the function search okay and return date with margin of 10. nh1.0 to search next I will create a client-side component that will contain the input field for source for enter into Source terms standard div ided display the source results so use clients RAF saved features react function known as import the search component so resource input component now let's create a input field [Music] input text name Source ID search last name to the shadow all around it you can see those color to Shadow slit 500 now it will be 75 percent high top 10 and up heading of two the outline would be none and a button now let's Center it okay [Music] okay now let's create a state for that field import used hook this detail have the source done search term and set system you state I will create another state but it will be an array this will be the array of results that will be sent from the server now I will create a function do the sourcing it will be a purely purely server component first let's import the polar model the schema contains the name of some smartphones their prices and brands now let's connect to the Google server with mongoose.com server will be true and unified topology videos this function will take an argument that is the search term no the search term variable will contain will take will take the Source query now in the Prime component I will import a source function also in the pastel JS file I will import a search here function we will also have to update okay next dot config.js file I will set up the experimental text for the server since and also server components external package and restarter server then I will pass in the sources are function is a prop ER Industries into function I mean in the component I will declare a new function get result that will face the results Source visual function and set the set result Ada with the response that receives and I will set down since event listener in the input field below Source down and of course console the searching result ready and I will call and click if any second button calling the get result function now inter source is all component it results or find which is a mongoose function dollar or in here I will pass in the name and download request and the search term and then I will return the results and this should be within value places as you can see there are name and airplanes let's try it okay I'm receiving the two galaxies smartphone set I have installed restart Samsung okay now let's display the results foreign save it and name brand price and quantity to keep some margin let's try it out Galaxy okay now you can see if I replace the capital which more you don't show the results is better results so what I'm going to do I'm going to use circular expression to make hold the first letter no it's research done into capital first letter text cons convert equal to text dot replace Global flip and then it will take the first letter in the in the sentence for the first letter in the code period and it means to uppercase it is a quality function that will change the letter to kept then I will return the converted text and declare new variable cons turn first initial called first letter function and password agreement and over here will be comma and the name key will have also Source do the same search with the first letter being capital save it and guide okay now it's working now let's try Apple hit on display because I am searching only through the name fields not the brands so this is fairly simple [Music] just copy this paste it name since the name to brand save it fill okay it's working now controller yeah it's okay there's another way of doing it here every time you enter a letter it will contact the source operation you won't be you need to shut down click even users Motorola Simpson epic stock called Stuff educational function okay but I have got certain warnings over here that I am unable to fix for the I think I will have to convert the input string though this one this one's the stringify then I'll have to press it again before I pass it to the result so thank you for watching and I'll see you on the next one

Channel: Dhriti

Views: 284

Keywords: NextJS 13.4, search bar, mongodb

Id: 0Ymxs-f7F4I

Length: 18min 59sec (1139 seconds)

Published: Sat Jul 08 2023