Live Search in Laravel using AJAX

hi Jeffrey here in this tutorial I will be showing you how to implement life such in using Ajax so I have set up my database table here on MySQL and then I have done a dummy application here that is pulling these posts from this database here so I have made this application it's just for the purpose of this tutorial and I have this input box here that I want to use to do such in this list so every time a user enters a character here Ajax sends a request to the database check the title of the post and compares the title that matches whatever has been entered here and then it returns whatever matches that content so all the posts that much whatever I slept here are going to be returned in real time so let's jump in and write this code the first thing we are going to do is to write our route that is going to handle this request so to save time I can just copy one of these routes but just remember that this route has to be outside the media earth the ultimate way because if you put it inside here it will not be rain unless someone is locked in and where yeah you can see these are posts that do not require anyone to log in so the route must be outside the ultimate way and then I can call this maybe something like posts and such and then here I can do such posts this is the router I am going to be calling and then I can do here something like such posts so this such posts is a method in the front-end controller that we don't have and therefore let us head there and create it so head over to front-end controller and down here add that method so public public function and that and then this function is going to take a parameter you remember it is going to be requesting some data so request sorry about the request and down here we are going to do something shortly the next thing I would like us to do is to make sure that we are calling this ID so here this is the input that is taking our whatever we have typed or our such query so here we have this input and so we want to make sure that it has ID which we are going to use to listen to changes in it so in my case my IDs here it's just called such posts and therefore I now can go ahead and write some code that is going to be used to get my input and send it to the server using Ajax so I can go to my footer here this is where I've written most of my Java still so I can just add another script tag here and then here I want to write some jQuery code and for the purpose of saving time I will be copying some code that is I used to do these calls and there you go so body on key up so this function is a listening to the key up action and then key up I want this key up to be on this ID so every time this ID has archeops replace it yeah then I want you to do something for now let us just log something on there tamanna so changed or probably we can just get that input whatever has been entered there so we can see variable such very equals and because we are using the same input we can just see you can call jQuery and see this dot this dot value Val okay so this variable here contains whatever has been entered into this input and therefore we can try log this to the console and see whether we have something so if I pull out my console then i refresh I can do something like D and you see we have a didya so if I do something like this is a book you can see it's logging every action every change is being log to the console and if I read I did it you can see again it goes logging every action wonderful that has been done so the next thing we are going to do here we don't need this console we are going to be calling our Ajax request so we can just write our Ajax code here so dot jacks and then what do we want to do here we want to we want to tell it that the method here is going to be post and then we also need to tell it we are it will send this thing and we want this thing to go to power out that you remember we have created when you go here you remember we have this route such posts so you want to send it to that particular route so we just say route and then add sorry we need to do here we need to have double quotes remember the rules of strings if I put a single put here this will read as if I have terminated history so it will not understand what I do not understand what it is to do this part so we need to use double quotes here or we use double quotes on this outer one and then we use single quotes on the inner one those are the rules of strings in most programming languages and then we need to pass data type and this one you want to pass JSON then what is the next thing we need to do here we need data the data that you want to send to the sava and this one is going to be an object and the objects will to pass here the first thing I want us to pass is the CSRF token so that we don't have issues with Ajax so we can pass a token and this token is going to just generate a again CS r f CS RF and token and then the next thing we will need for our data is now whatever we are searching so this is request to such request and we pass it here as such request and such request so what have we done here we have a method which is post you have a URL which is to our out such posts weekly tender let me tell you that we want the Java data type to be JSON and then we have data which is an object which took two elements we have the CSRF token that is going to validate our authenticity to send data to the server and then we have the requests the such request which is whatever the user is typing here so every day time there is a change is one of trigger an event that is going to be sent and then the next thing that we will need here is what happens when we have a success so just say on success I want you to want access I need you to do hold I need you to run a function and the function that I want you to run here is going to receive a response this one you can call it whatever you want must not be response but I like to call it the response and then you do some stuff here so again we are going to come back to this part let us first of all send this data to the database to the server and see whether we have any problems so we have our search there and then this data is going to be sent and even without doing anything if we have an error it's going to show up so let us try to do D and yes we have this post and when we open it in the network in the network let's see what this one is saying post is not supported so we need to make sure that this route is a post remember if this one if each ox is passing a post here it must be received by a post in the routes so if i refresh this page now and I tried to do D 3 there is nothing so looks like we are making proper progress so here I can just write a query to get my data so I can say variable press then I get what do I want to get here I want to get whatever has been sent here so I can get that and then I want now to query the database and get whatever was whatever posts match whatever query has been typed here so I can see variable costs equals post remember post is model so you must make sure it's imported up here and then post and then we are going to see here we are in notice that we are going to be using like because we want to get the posts whose title is lights or which title is similar to whatever query we are writing on that input all right so we're going to say posts where here we are going to have their posts tight oh so we can come to the database and grab it sorry we can come here and grab the posts tight oh that is what you want to compare so we had a posts tighter and then here we are going to say like then this is what I was telling you now like and then yeah make sure you very keen about what we are doing here then you have to leave at that and then you have a dot then after that you this is to concatenate whatever you want to compare with so in this case we are going to add this draw query from there from the user and then we are going to concatenate one more time and then we add another percentage sign and then we go out and make sure you get all of them alright so let me reduce the font so a tree so that you can see this in one line of code so let me make this maybe 1817 maybe alright maybe I can just keep it at 20 and then I can push this one over so yeah okay so we have posts here and then we have the motor we are post titles from the database lake and then you concatenate whatever has been has come from Ajax call and then you make sure you get use the get function to get all the posts and then from that the next thing that we are going to do I just want us to return a JSON here with all our posts so return return JSON encode and then we have our post variable in here so this if we are successful return all our posts and then we come to the footer if we console.log response also log this response we are going to get or posts in their log so let us refresh and try see whether we seem to have an era so let me do something like does and you notice that as I type here we are getting some data so therefore when I do D we had five Oh we had two but this does and how much then I control type e we had only one then this one you also have one so apparently we have returned to the data so now what we need to do we need to make sure that we take this data and replace what we do with the data so what how to do that we need to we need to do some coding here but before we even go here you want to make sure that you are table the table that you want to replace the table body has an ID so you can do ID and then this one we can call it we can call it something like dynamic row you can call it whatever yo this doesn't matter but make sure whatever you call here is what you are going to use on your Ajax success function so on this success I want us to do some few things number one I want us to declare a variable here called bar code table this table row for now it's empty but this is the variable that is going to store our rules the rows that we are going to use to replace whatever table is here for now okay so that one is going to be empty for now and then we are going to go ahead and say every time we have our response go and get go and get an element with an ID of this dynamic role put here okay the dynamic row and then set the HTML of that - nothing so what our does is that every time we have an input it initializes is variable with nothing then if he sets our tempo - so it removes basically all this content here this content is removed this content is removed and now this one is left empty alright and then the next thing that we want to do after that is now create our table so we are going to run our for each for each here so each this is a jQuery for each and then we are going to get rest remember rest is whatever is here so this response if you here you of course this variable another thing or this whatever is here is must be whatever is here because you want to loop over that all right and then here we are going to run our function and this function is going to take in two parameters the first one is the index index and the other one is our value okay and then we make sure that here you add the sum bracket so that we can be able to write them the code inside this function now you remember the variable we said here this one is what you will now to set some data in so what do we want to set here you want to create another borough for every time for each response we want to create a to borrow alright so we can basically go come here and grab this table row as is and then we paste it yeah and that looks ugly let me just format it a little just make sure that this is in row line of code yeah beautiful and then when that is done this is not going to be like this so we don't need that here we need to pad plus and this one will end here right so class and then also here we don't need this so we are going to have plus and then here we also to have Plus okay beautiful so what we have done here we have taken the table row and then this table row that was blank here and then we have set some table rows into it so for every response for every row that comes create a tipple row with this tempo data content here and then this is the post now instead of post here we are going to have this value okay able to have a value there because this value is what contains the description of all the title of our table then the description sorry so we can tick that then we pull the tip post title and post body and once we have done that the next thing that we need to do is to set it on this table here so we can now grab this and put it here and then we say this one we want to append and what we want to append go to a paint base table all right so with that we can test our application and see what we get so refresh our up we don't seem to get a problem and now I start typing does end probably looks like what everything down there so let me see where we get something wrong this table is a table row so dynamic row dot HTML is nothing and then okay okay okay okay so what what's happening here let's refresh this and check it again so we have one two three four five six so if you clear this or probably maybe where I can do what you can try to do is to log let us try to log yeah console dot log and let us log it maybe the table roll yeah and see what we get oh sorry we have a syntax error oh sorry sorry I see I think don't even need this here we copied these things from PHP and we did not change them to JavaScript syntax so instead of an arrow here we should have a dot so let us now refresh and see whether we get it right yeah that's okay and does and perfect you see as I start typing this one filters my content you see if I start typing something like how to install Python so I start saying install and you see it has filtered these two so here we have installed here means half install all right what if I start typing something like reasons so here i come he end reasons and these two have reserves this one has this one has resource and then we have Y and then we have P for Python you see this one filters the other one gives us only one with Python so we I think that is okay for this tutorial guys make sure you like the video and subscribe to my channel so that you can follow my content thank you and see you in my next tutorial

Channel: Geoffrey Karani

Views: 7,705

Keywords:

Id: j7IFsciVjzI

Length: 21min 27sec (1287 seconds)

Published: Tue May 19 2020