Laravel Live Search Using AJAX and JQUERY From Scratch

hello guys if you like my awesome gaming videos my programming and web development courses my editing courses and editing videos and my tech talks and tech guidance then you can consider subscribing to my channel and click on this bell icon to stay connected with me all the time welcome to my channel so this is a very interesting video i want to show you the live search in larval which is many you go for you guys requested how to work with this so i just implemented it using the adjacent jquery and it works really perfectly and fine and with the image as well suppose this is our index page where we can see all of our product information their pictures and their name titles and their category and description and price we can edit them as well as you can see we can edit them and we can also delete them if you want and also you can also go to if you go to the slash create you can create all those informations so it is completely dynamic of what i did just so let me show you the search if we go to this search product it will go to slash search where you can search all this information it will take you to new page product search page with ajax normally people do it in the index page this is actually the index page if i show you that if you go to index page as you can see here i just use for each loop and gives all the data and the edit and the delay functionality also implements using iphone okay so this is inside the database if you go to the index page we have only two product if we search hello if you search hello as you can see we have without reloading the page and without clicking any button we can say hello rs4 smartwatch okay so it works perfectly and live if i say iphone also it works perfectly so our live search is working really perfectly so if you know more about my courses i talk about laravel crude image file upload nbc pattern and black templating advanced query search functionality and this is the normal search this is not the live search we have a pdf conversation we have dynamic chart we have admin user panel customization and social light and much more okay if you go to my youtube page as you can see you'll see all the things that i have taught in the previous so obviously so definitely subscribe to my channel to understand more and i also have the github code of this whole project in larval ajax live search this is the repository that i just uploaded so if you want to know more about jquery just go to w3schools and learn all of those things like jquery how to work with jquery and css manipulation html manipulation ajax which i'm going to implement in this video so this is very important you can include jquery from cdn like google as you can see jquery min.js and this is the ajax that we need okay this is very very important google ctn and then we have the jquery syntax if you want to do this like this dollar height you can hide something uh suppose you want to hide a p tag you can hide it you can go to jquery set and here you can see two input three important functionality you can get the content using text method or html method or value value is very important because it returns as the value from the form field okay and this is the important thing that you're going to implement here as well you can use set method to save something suppose you want to save some data in this particular form field and html you want to add some data you can do that very easy you can use append prepend lots of lots of lots of functionality are here i highly suggest you to learn all of those things from the jquery tutorial from the w3school which is really helpful so what you need to do you need to go to the bootstrap starter template just i just used to add the um css of the bootstrap and the javascript okay so this is the thing that i have used in same thing that i used in layouts and app as you can see we have the script tag for the bootstrap and we have the css link for the bootstrap and i just named the title to adjust live search and the yell the content and all the things are getting extended by using this thing okay section content okay this is the create page this is the edit page this is the index page where you show all the information and this is the thing that i'm going to work on in the search functionality okay so first we need to add a div with a class of container margin top of three padding of three okay so just keep it simple and here i'm going to use ajax live search page okay simple to this particular page so for that we need to go to the product controller and here you're gonna use a method public function search okay and it will have a request request okay and it will return us to the view and it should go to the product dot search page okay it will go to the product dot search page and this is the thing that you're going to rent out very simple then we need to create a route so that we can work with it suppose this route and make sure it is a get request to get request and let's just call it search and just call it search okay and it should be product dot search so honey go to the slash search it will go to the search page okay it will go to the search page and it will take us to that so our route is perfectly working perfectly let's see and one more thing we need to go from index first we have edit button then we have a delete button now i need to call another route to go to the search page and it should be product dot search page okay so when i click on this search product button it will go to the product search page which is actually this thing okay so if you go to the web.php we have a product dot search same thing now we need to optimize it php artisan optimize artisan serve okay we have our index page if you click on this it will take us to the ajax live search page let's implement it here if we go to search then go to search button and here this is the place where i'm going to implement everything and here we have the um google cd and link ajax google apis as xx library okay so you just need to copy this thing and you need to paste it here otherwise it will never gonna work the jquery ajax will not work without this and we need to set up as well so for the setup uh i need to just go to google and ajax setup for that you can go to my github profile and here i already have it if i go to products if i go to search i already have all the thing that is set up as you can see this is the script tag that you need to set up ajax okay just paste it inside here okay so these are the two things very important first we need to set up the attack setup and then we have to implement the jquerymen.js this library so this is the important thing here we're going to use div class row and we just use justify content center to make every contact in the center and here i'm going to use the class call md for and another another div class call md eight so this is the so this is the uh call md8 we're gonna show all the card view in a search product when you search something it will show us in the nice card and this is the place where you're gonna implement the form search form you're gonna bootstrap strap search form bootstrap search uh this works really perfectly this is the button i think this will work perfectly and just copy the same thing for this search we need to search something here okay and give it a name placeholder okay we do we need this button but we don't need this this part we also don't need this part perfect so what we need we need a id to search it and hold it and get all the data from the input as you can see and we also need a name so that we can request the same search whichever product we want to search and get it using this name and i'm gonna name it search okay in the controller we're gonna use this thing and let me get the id search okay so first what i'm gonna do just write discreet tag and here write document.ready function okay document.ready what i'm gonna do so this is very important first when the document is ready we need to get the data we need to get the data by its id search so this is the form that we have named it id search and it will take all the values from this input so search okay but on finally write something when you key up when you write something something will happen a function will trigger okay and then we'll call our adjuncts ajax this is a simple thing just name it data and and while the document is ready when the product page is ready or the index page is ready when you click on this search input tag as you can see search input tag we're gonna get the value on key up okay so var value we need to hold it in a variable which is very important we need to hold that thing so how can we hold the thing we can use dollar this this means this content this is the id this content we're gonna hold this information dot val val means we're gonna get this data from this form input okay and this is the thing that we're gonna print support um alert value okay and suppose we just comment it out and i can console.log console.log that is hello i think this will work perfectly so let's check it out so let's go to azure live setup and here we have a form and if we write something like iphone and if you go to console as you can see this is the same thing the same thing that you typed is here suppose i p f h o n e whatever you write on the key up it will show us so it is working perfectly we can get the detail uh select something okay we got this value using this val so if we go to the documentation so using this uh so if you go to the jquery set using this valve we're going to return the value of the form field very very important and now we just uncomment the ajax part and just delete this we don't need that and this type should be get okay or you can write get and url is something called slash search this is the url that you want to go to search some product from the database and the data it should be like in the second bracket just right search this is the parameter going to search the product by and the value should be uh the value that you want to search in the form so this is the value that you need to search suppose iphone or the smartphone so this is the value that you want to search okay so this is the thing that is important and if you write data search is equal to search then you need to do the same name search if you name this it's a different parameter like query this should thing should be query okay and this value is coming from this value and our data we don't need to have a data type here normally a suggestion and whatever thing we get from the database it will show us in the success parameter in the data and we need to write console.log that data very simple it says just go to this particular url and search our data using this value that we search in the form and gave us every single responses and information and then show us in this view okay and i'm gonna append all this thing here here i'm gonna use give class and i'm gonna name it card and this is the bootstrap card class okay very important and um suppose if you go to index page and this is the card as you can see this this is the same thing that i'm gonna use so just me just copy this thing and paste here this is the same thing we have image we have a card body everything so just delete it here i'm gonna append all of those data that we get to show us in a card view okay so this is the main thing and so let me go to the our controller and let's search the product okay so let's check if it is working or not so let me go here and here you need to first we need to remove this thing and first we need to check if request we need to check if request is adjust we must have to check that if the request is adjudged that we will perform all those operations so when the request is adjudged we're gonna call it internal products is equal to product where okay where title is like i hope you not know this query this is very important to search any product from the database when the product uh just give me all the product where title is like something uh this okay very important so first we need to have percentage and dollar and request and search so this is the same thing that we get uh if we just go to our search page so this name search is very important to get all the data from this form whatever we want to search and this is the thing that you want to search in the product database table okay very important so just give me all the data that we search here like this using the title just give us all the product name we have a title like this okay and this is very important and just use another dot and here percentage so percentage and dot request or search dot and two single quote and within the single code just write percentage and or fire clause okay or what you can use same thing like this if you want to search it by price you can do that and here i'm gonna use for wire again and this is based on the category of product it can be men's shoe women's shoe it can be electronic products it can be smartphone in anything okay category we can search it and finally we need to get this data so this is the main query that we're gonna implement so just make it smaller so that you can see it perfectly so after all the thing is done so if we have a products just check it if we have the product that we're gonna use a for loop for each loop and for each products as product for each products as product first we're gonna use output output is equals to a normal string output is equal to empty string then we're gonna append this output we're gonna append using just make it bigger for you so that you can see it first we just added a simple variable output and it has an empty string so that we can use it later so for each product we're gonna show all those product information using in the card so this is the thing that i'm gonna do so dot equals to and here you need to use single quotation single quotation and add all the thing that we have in the index page so let me copy this div okay we don't need this div card this is the main root diff where you're gonna append all the information so we don't need the whole d we just need information only this part card body why do we have a title price description all of those things so we also don't need that just copy all of the thing and paste it inside the controller make sure it's in the controller okay so this is the card body and we don't need this edit and delete because we are just searching delete this thing and delete this thing okay so i think this works perfectly fine so this is the information we're gonna show within this just first one to delete that and add it here okay finally semicolon just use it this is the same div that you want to use within a single quotation okay make sure that and here we're gonna pass our dynamic data first we have the title okay title category so for second one should be category and the last one is price okay simple so then we have a cat first we have the i'm just looking through it so it should be product and product will have a title okay so how can we make it dynamic use a single quotation here and place a dot and the end we just add a simple dot and single quotation so this is a simple thing that we're going to do in every places and this is for the category simple for the category and finally we have the for the price and this is for the price okay so don't use double curly bracket it will not work here so it has a price so to hand we need the dollar we don't need the description so this the information would be enough we have a product title category and description based on those two information we're going to see every information and we also need one more thing which is the image so we need to get the image if we go to the index page so this is the thing that we need image okay so here insert a card body i think this will work perfectly okay we don't need that need do single curly bracket so inside that we're gonna use dollar product and product will have a thumbnail thumbnail so if we go to the migration folder if you go to the migration folder as you can see we have a thumbnail for the product title price and category this is the thing that we are getting okay very simple thumbnail and just save it i think we need to add this sign as well okay now it will work we have to use the due to this two dot within this single quotation and within this double quotation so this is very complicated this part for many people so it should be inside a double quotation and inside that we have a single quotation and we're going to continue it with the two dot in the two ends for the image hope it's work perfectly so all of our image are inside if we go to our public folder as you can see all the public files folder products all of this thing are here so we have the adjust request if the azure sequence is done then we're gonna get all the product from the database if we have the product we're gonna for each loop and get all the information okay so this is very important and after the for loop is done you need to just return response return response json and you're gonna response uh json as output okay this is the output that we get and after the ajax request if ajax so this is the products and after the attack sequence is done we're gonna go to return view will go to the product dot search page okay it will go to this search and this thing will happen okay and it will go to the product or search page and show us all the information here so this is the part we're gonna show all of our information now we get all the information here and then we need to append so first let me optimize it and let's check it out if it is working or not here i'm gonna search iphone and let's check it out the console yeah so we have all those data almost we have all the data we just need to append those things we get the image and with the file slash product as you can see we have the title we have we got the electronics product and we have the price as well so it is working as expected and we just name it my card and the my card this is the class attribute okay so in the um attribute and just select it using dot my card okay so just copy the same thing we're gonna show all the information in the call md8 inside the card okay so my card and here i'm to append this using the html and send although all of those data simple so in the my card i'm going to send all those data that we get from the uh this page from this ajax request they get all the informations and we're gonna output this result okay what we get and send us the response as output this is the output that we're gonna hold inside this page so this is very important to understand this is the response that we hold that we get and we're going to append this using.html in the cart page so this is the simple thing that you have to do just set up your ajax use this library ajax and just call this document is ready just call this functionality so go to that url get this type and search the data that we want to get if we go to that i hope it will work see it is working perfectly okay very simple very simple so how can you do that just go to that url particular search and i'm just recapping it just go to slash search and it will go to product.search and go to search method and it will search whatever product information that you want to get and just for each loop and just show us all the information and give us the response and this is the response that we get and just append it inside the card in the command card okay so very simple and easy step how can we do the live search and if you just search hello it will just search the hill if we add more on one more product it will show us these things so this is a very simple stuff how can you use the live search functionality and you can you have all the code inside in the github repository as well if you want it and very simple stuff and just simple simple copy pasting and if you want to learn more about it just go and just read the jquery tutorial jquery html traversing and ajax so i hope you'll see all the video that i uploaded in the larval tutorial series and the playlist and this video will also go into the playlist and i hope you will understand a lot about it in the near future so till then take care balance in the next video

Channel: Great Adib

Views: 5,538

Keywords: laravel, laravel tutorial, search, laravel ajax, laravel live search, live search with ajax, live search using jquery ajax, get data from form using ajax, jquery events, learn ajax with jquery

Id: fxyf29q2Orw

Length: 24min 7sec (1447 seconds)

Published: Sun Apr 24 2022