Multi Select Dropdown Filter in Laravel using AJAX

hey what's up guys so welcome back to another tutorial so in this whole series we have covered about the pagination using ajax like if i just reflect to the page 2 that's going to show us the page 2 with our page refreshing and i i reason why i created a lot of videos related to the pagination and sorry using ajax just because you people knows that how we can work asynchronous asynchronously and a lot of applications that that's what um even requirement and these are the requirements sometimes to build things with the ajax because that makes your things a lot smoother and a lot a lot elegant right so that's what my plan is to create all things using ajax right so here you see that we have covered up the search as well so search is all depends on the first name and the last name right so just i want to show you real quick that if i just want to type dja right whatever the name is so you see now we can see the one card and soon after soon i just removed that all and everything removes and appears up on the browser right now now the last in the last section we are going to create the the filter right so filter is what we have to we have used some drop downs and on base of drop downs we can search the data right so in this whole series you see that you cover up a lot of things if you are still messing up with your how i want to create that all you can watch my previous video all from the beginning it despite just created this front end my on and html css is already inside that but still i want to prefer to put the html code and the css as separately but for now you can download from my git uh get up repository which i have the link in the description so you can also um download the code and and you can start working with me right so that's what the one way you can do all right so let's uh start with the first topic but before starting i want to show you that i want to have my filter on three things so just i want to add up my filter here so first you have to keep sure that you have the code inside your includes i have the inc folder and inside inc folder which is includes we have three select options right so keep sure that this html should be inside your filter file right now i want to bring this in i want to bring this in inside the home dot blade right so far well you have your search here you have your and this this what is coming from user underscore data where you see other these cards which are loop which are which are in which are coming from the database and are we fetching using database and looping through it so that's what is that user underscore data and next we have down we have all the scripts right so i want to put up here my filter and i just want to bring this in uh inc is the name of the folder and the file name which is filter right i hope you guys understand that but if you have still any issue with that you can definitely comment me and i want to reply you about all your queries right so make sure that you are doing each and everything step by step right so i bring this in and let's have a refresh this out and then how it looks so this looks like this so right now you have your options one options one and one options one which makes no sense so we want to search the data on base of these cards so i want to add some data also uh so for that i just need to go to um i want to add some data inside that and so some new features that i want to add on these cards is i just want a real quick come uh go to my search and user underscore data uh which is inside my pages that you see here and now next i have to do is to create the some html for that so we are happy with the email uh we are i just want to add up here one more thing here is the salary right so i just grab it from here and put that after the type which is this right so i want to put up here horizontal hr and down here we have our spam class right which is the tag that's salary and that's with our salary and from where the salary is coming from later on i want to bring up a new factory and and and and call the seeder right so next we have the email address which is fine and i also need to add up a country just after the address right so just after the address add another field for the country and uh inside the users it's all good and now we are i think so we are all done with that now i just want to uh but if i refresh this this one i'm going to show me an error but i i don't want to show you that so first now you need to go to your user factory right so i want to go to i control p data and just simply type here user factory right i press enter so that should be inside your root directory which is the database folder inside factories we have userfactory.php file right so so far we have this basic data i'm happy with the first name last name fine email fine uh type which is again fine i need to add up here the faker for the country which already coming from here and where does the salary coming from right i just need to see salary right so i also need to add up this uh social underscore photo which is not in the previous case so i wanna i want to add this one as well so i just press enter and add the social underscore photo and yeah i need to add the salary after country just put that here so that means that faker add the unique and the number should be between 1000 and uh to i believe these are one two three four five right five digit five lakh right so that should be between these two number and all the numbers which are unique you again this all is not from my i haven't created any function or something like this all you can find from the gitwrap position which i've given the link in the description as well so you can add this as much data you want to filter right so um i also need to uh definitely i just add the column so i need to add this also inside my users table right so we bring up two tables so uh first one is the salary so i bring this down after the type and next we have also bring one more field um the type the salary and the country which is fine i believe we are good to go from here right one two three turning field so right that's fine so i want to save this in and let's start and run the seeder so all i know all i need to do is to go to my terminal you can even open up your terminal uh of your um visual studio good but i'm happy with the kit so you can also install that git from git dash scm.com that's where you can install that so here i'm gonna run a command which is first i want to roll back also php artisan migrate rollback so what does it do it will remove all the data inside the column so now i want to again migrate that so it's very simple run the migration and i want to create the all the uh column inside the table right so that's wanna run our migration and next i want to run the seeder so it's very simple php artisan db colon c drop make sure that if it's not showing up and showing any error right so that's raw that's worked perfectly and let's go back to your database and see everything works well so now we have our salary we have our type which we need to i actually want to just filter the data on base of type and the salary and also i want to search on based off i believe one more thing that i searched through it so let me see from my previous code um so i need to go to my filter so i have searched on base of three things the first the yeah country also so country type and the salary right so these are are the three main columns where i want to search right so let's go back to your code and just close every irrelevant things okay so now we are done with the migrations we are done with all the data added up using cder and now i'm gonna go to my global constant and the reason why i'm going there global constant right i want that i i want to add up here let me go to my browser and show you that i want to display some data as well definitely because i want to populate data on my select boxes and that's what we can filter uh the records using from our cards so so i real quick go to the global constant so right now um it depends on the data that we have but this is a large data i don't want the i i don't need i want you to do this all stuff because that makes it um difficult for you to understand right so just make it very simpler so i'm i'm right now i'm on my global constants and uh first thing i'm going to go here is we have the user type front end all in and the user type back-end which we already created that before and in the for the last video now this const all means that in some cases that we want all the data displayed display using the filter uh using these drop down so i i just added a variable for the all next we have our list underscore type so make sure this list i do is we created an array and call it using self and that one bring the value for the front end and that want to bring up the value for the back end right next we have for the countries now i want to adding up the countries which are right now these selected countries which i i get from the database depending on the data that we have we can do later on i want to i think so it makes sense once i do it um next we have some salaries variable as well which again should matches with our database right now all the results on in our database should be different because that's our graph from a loss code right so it might be different but we will we will graph from the database later all right now just close that up and go to your uh to your filter.blade.php so i go up to my filter.blade.php and let's bring this up all the data here so right now we have our slack name and just id is empty so i'm gonna do first for the salary and it's going so i just put that up and uh let's option value equal to empty right so i want to remove this value for now because we're not saving any data right we are just filtering the data from the database we are getting the data so what it does is here is i just want to grab the for each and remove this option we don't need that option because we need to fetch the data from our global constant so i paste it up here so what does it do we bring the slash app slash constant slash global constant so we bring this in we bring this uh class of the global constant which we can uh we grab and we put up inside uh our blade page so make sure that once you're putting any class defining your class inside that so you bring this all make sure that that slash app slash constant is the name of the folder and the name of the class and we need to access the all so i bring this in and and and here in that case i just want to grab all the salaries and all the range and and and just display and looping through it and just put up we need the ranges arranged values so just refresh that make sure that everything works fine for our case so yeah you see here now we have only the values and same i need to do for my um for the sort by so sort by means here in my case is we need to filter the result on base of the front-end back-end because we have our types two types which are back in and front-end right so i need to filter the on base of type as well so i give it the idea of solderness go by so grab this the same thing i i did the same thing but here i just uh inside this uh we we want to display the tie which are two front and back end and this actually lists underscore type is coming from there this variable right so just show you real quick there and the last thing we have is the country so i i grab this country i put this id just remove these names we don't need that so looks everything clean alright so we have bring our three options next we have to um all i need to do is for the country yeah so just grab this all and even i need this i miss one thing here i need to bring this all case for for the sort buyer as well so yeah i have this right so just that's fine and next uh the country so i again grab my code and again this all is for the all and lists underscore countries which are coming from the class and we display it by using loop and print the values right so display the values and now i need to go to my browser and refresh this and now you see that we have populated our all data right so friend backhand we have the salaries which looks very very much horrible because that makes that's looks not that's not seems to be like the salaries but it's fine the concept remains remains the same you can change the values if you want to right so um now we have the countries as well and everything works well right now we need to go to our model so the for the model i need to go to the user.php right so here in in the function that we already created which is the get users right so that's where we are gonna display all the um all the selected values right so first we are gonna work with these um we are gonna work with the uh country right so first work with the country so i i need to bring this country inside as a parameter because we need to pass to the controller so that's that's where i just passed this uh country and i want to call to the controller so for the country just after this ending of this if statement i need to bring up an if condition right and the condition is very simple that if there is a country and the country is not equal to all right so um just want to bring this uh global constant and this is coming from and give it the value of all right i i just passed it the if there is a country and country is not equal to global constant all and the spurt of some parenthesis and saves that and that's gonna show me up an error and the reason why because that should be and also the country so just want to spell it better i'm sorry guys i'm not good in in i'm not good in spellings uh so so really apologize for that right so um if country and country is not equal to and and we need to bring this class as well otherwise want to go show us an error so i need to copy that and just bring this in inside my user.php so i bring this class in and next we need to go down and if country and and if it's not the all case so remember this all means that if we need all the countries to be shown right but now if it's not in that case and then we and remember and n means that both the conditions should be true so if if the country if there is a country and it's not equal to all make sure the both conditions should be true then you need to do is to go and grab the users and grab the users where so i put up here where condition and there i want to display here that users dot country and past our country right so whatever we have that's gonna pass or whatever the country that we choose so that wanna display us there so that's fine for the one case now i'm gonna go here inside my home.blade.php so go up here and down after the search right i just want to put up a semicolon um down after here i need to grab get the value so i put up your country and i also need to bring my on change property so on change it it's as soon i change and event uh the options so i just bring this in and and that's why i don't need to pass up any even that's for just for testing right so if i change the country means that if i change the value from the drop down right so on change is a property if i click this that want to show us record on base of that so so soon after i change the country that's going to call this function but we haven't any done anything yet so far for the country so i need to grab this and put this inside my um so this is going to search on base of country so what actually we do we do we do is we we get the value of selected country we created a variable and for that id we grab this id whatever the change that we have it's gonna dis select it so we we are actually getting the value of the country means that whatever i searched this gonna pass up here and uh we need to just we need to pass that up inside our data so i'm gonna put up here i'm gonna put up here country um that should be country and uh and equal to the value that we passed so this is gonna get the value for the country and uh all good for now right so now i'm gonna go to my controller which is the home controller so that should be inside my app http controllers home controller and that's where i need to pass up my request right so we get the request from the model user.php so i'm going to bring my country in i'm going to create that the country and the re past of the request and inside the request we pass up the country as simple as that so um that's not only what we needed we need to pass that as well inside the cad user so i just have the curia i want to pass up here country right and same in the case that we created a static function and we need to pass up the global constant for all right if if that case if we have um if we have to grab all the countries so this this is what i passed up here and on base of the selection this is going to get the request and passed up and and render into our page so let's have a look and see that everything works fine for our case so i believe it's taking some time in mind gonna show some error i believe so i'm gonna open up my inspect real quick um yeah so it shows up an error and and definitely there should be an error because we haven't bring up inside our controller so let's get back into the code and bring this in because we are using global constant inside our index function so that's the reason why it shows up in error and let's refresh back and now you see we haven't got any error right so let's inspect this out i just want to add up on our on our browser on the right so right now we have to see our database so there should be a country column right there so right now we have malaysia which is i believe it's inside my variable and uh let's bring one more country which is uganda i believe so bring this in as well uh that's what i talked about already that depending whatever the data we have so i'm gonna remove this and bring this in so right now we have malaysia and uganda in our database and it might be their other so let's have a c and and check this out so refresh this all and even i don't need to refresh pay but still it's fine um let's search on base of country so i'm gonna grab malaysia and it's working fine right so there's no error right so that's that's good to see so you see um i have searched i have searched in malaysia and that's gonna show up the result let's search for some of the country i believe there's uganda as well let's search that and you see now the country you're gonna as well exist here and let's search another country let's suppose i want to finland it's not in our database the reason why it's empty because that's not matches up with our request there is no country with the yeah that's matches up malaysia matches up let's look for the finland my favorite country and let's look for the norway and spain so there's no any matching record so if i click on all that's going to display us all the day all right so that that's superb so we are done with the first one uh the country this this last the third or drop down now now let's let's move to the another one which is the let's work for the front and the back end right so i'm gonna go real quick to my code and go back i just need to close that all for now and now i need to go to my user.php and uh i'm gonna grab put one more for the let's look for the sought by right so i just want to again bring the same thing like i did for the country i think so if you guys get this idea you can do it uh you can quit this video and and try to do your own but it's just a a big concept here i just use here uh a good trick here that if i use here if condition and let's see if there is a sod buy if something we want to sort so if if there's a sought by let's bring this variable in again and and make sure that lc first so this is what i do if in in some cases if the lower case first uh sorry if the letter is in capital k is in capital and uh we we can even convert that into lowercase so that's why i use this it's it's a very useful function like just like uppercase or lowercase first right so the if the first character it will like if if we have here um like front end so this function do is it will the first letter should be a lowercase right so which is f right so i bring this in and i forget to put here equal to assign it and make sure that should be in lower case if it's if it's in the case so let's bring another condition which is if the sort by is equal to equal to the front end so it's very simple i bring this variable and assign global constant and get the value of the front end if it matches up right so just put the same condition as above and changes and change that to the type because make sure that this type we have the column in our database which is type let's show you so backend and front end so we have a column name type so this is coming from here and and the name of the variable that we pass here is the sort by right it's very simple so if and if otherwise we need to do the same stuff and we need to grab this same thing and just make that this a back end right so if in that case if it's a backend and grab the oh and let's put that into it and now we are good to go right so we are good to go for the let's let's do some comments right so looks more meaningful to you so this is filter by country and this is filter by um you could say it's filter by type all right okay so we are good to go from here let's go to our um to our home dot blade right so home dot blank so i go back to my home.blade.php which should be right here and what i'm gonna do here is what i'm gonna do here is the inside my yeah so i want to do the same stuff for the search on base of type so i grab this up and put this inside my get more users so i did the same stuff here so i created a variable so sort by i need to give this id to so this is that that's the idea we passed to our drop down and on the base of selected values so this is going to do the same stuff and very very much similar stuff that we need for our type right so i need to give that into my data so sort by we pass up the data and that's get the value and we are good to go for here now go to your home controller right so it's very simple i believe you guys are very much with me i i hope so so let's create another variable and set that to be sort underscore by and uh sort by and give it the and pass the request which is coming from the uh which we passed up inside our which is which we get from the data and pass it to the controller so let's pass up here a sort by right and uh we will later on we will do further for the range right so i just want to display up here and same thing i need to do is to but here i just want to do some different stuff like um by default this value should be front end right for what that actually it means so um in our previous case we have our all types like if if i want to search all still fine you can do that it depends on you so however you want to modify if you want to get the all the data so you're gonna also do that so let's have a search and see so i'm gonna refresh this out and let's look for the front end and so why does it know it works i think so i haven't called up the function i believe yeah that might be the case so i did not change the value right so what i'm gonna do here is to create this sort we we actually give it the id so i forget that to bring it so we passed here and let's see does it works or not so i refresh that let's look for the front end and i hope it's working and it's working very nicely and when we can change the page so all our friend right and let's move to the first one and if i just want all the back end and now you see all the back end developers all right so that's that's perfect right so we are done with also on base of time right now the last thing that is the is where which we are missing is the is the salaries right we need to search on base of salary so this this actually the whole app concept is like if you're making it like a job portal where you need to search the data so you can apply all the changes and especially most of the search is on our on the websites like where you need to search um one of the best example is if you're working for the um if you if you're building some websites for searching hotels or models and and many other great things like this so this so your search work really really uh vital role in such kind of application so the concept is that to make sure you guys to understand this and you can create anything like that so the code is written in a way that you could understand everything so let's last thing we need we are going for on select uh sorry on basis of salary so let's have a comment here filter by salaries right salary so i just want to remove that and so filter by salaries and uh i need to add up here the where does it go so let's go to my user.php and let's look for my ranges so it's a very same thing that i just don't need to keep repeatedly right there so pass up this range just very much same like what we did before so pass up here your range and that's gonna we did the same stuff that if the range and it's not equal to all and uh we can uh we can search on base of salary so if if the request is that like if we have a selected salary so that's gonna uh search it and get it into the range and that's gonna pass up inside our controller so how we wanna do a it's very similar to what we have here so let's go into your home.blade.php and bring this in and we are going to do the same stuff so let's copy that up and paste it down here right and let's make this indent indented so we get the id as similar we get the value and let's pass up inside the data so we get the value and put up here and last thing is very simple is again i go to my controller look how easy it is and how difficult it looks right so we passed here the value whatever we have and we give it the range and same stuff for my global constant all and put up here right just same like this and let's have a look here right so we passed up here the global all for there and we have now four parameters we have four parameter and let's last yeah i just want to add up the range requests here so let's put up the request for this so dollar request dash range so remember this range is coming and passed into it and let's route up the data so i believe we are good to go but now i need to grab the salaries let's suppose i want to grab this salary and put up inside my global constant one of the salaries let's grab this one and also one for the malaysia so we can um um cascadedly search that area where does the malaysia yeah there it is so grab this and put up here right so i think so this is fine i just get the two values you can the first one and the fourth one right so let's search it so i just refresh that and let's first see that if it's working so let's just grab this and again i haven't called up the function that's for sure so i again missed that so go back to your home.blade.php and copy that up and press enter and inside your filter.blade.php just get this id uh for your salary underscore range and uh that's call of the function right so let's have a look now so i refresh that and the first one right so i close that up and you see you can see only the one record now the interesting part is that that now we have all the records so what that actually it means so now in case of if i want someone as a back-end developer and also i want someone to be um to be from so it's not gonna work because the reason why because it's also need to see he's he must be uh let's yeah the salary should matches up and he should be back in developer right so these are the three matching record it also check depend dependently that all the records should be matched up if i just messed up one any one of them right so that's not gonna work right and if i put up here all in that case it shows us one because uh i just choose here that from all the salaries but he should be from he should be a back-end developer and mel and and the country should be malaysia and that's gonna search us more robustly we can only filter the record right so this is what all the end for this whole fantastic video which you can hardly find on the other youtube channel and i recommend back again i always say that you can learn from other great different resources are available on youtube you can search through them as i always say i'm a big fan of traversary media you can watch his great videos and that's where i have learned a lot of stuff all the javascript all the front-end stuff so this he's been a great giant he's been a fantastic one so i recommend you all and we are done with that so please keep like and subscribing my youtube channel and i've been planning that all the video that i created previously i want to make it series just like that series so you guys can learn a lot better rather i just want to give an explanation which makes uh sometimes it makes sense and sometimes it's not mostly for the beginners it's it it doesn't make sense because if you're very new and larval hard to understand the concept so i want i'm planning to make those videos again right so i hope you guys will enjoy and please leave a like if you really enjoyed this whole series must watch from the first and i want to see you with the great next tutorial uh for the next time right so so goodbye for now

Channel: AB Nation Programmers

Views: 5,826

Keywords: Multi Select Dropdown Filter in Laravel using AJAX, multi-select dropdown filter in php with database search, filter drop down list php, laravel, multiple search filter in laravel, how to display multiple selected value of dropdownlist in laravel, laravel datatables dropdown filter, multiple selection in dropdown in php and mysql, how to filter records from database with dropdown using php laravel

Id: Xp8ucoiZ40o

Length: 37min 13sec (2233 seconds)

Published: Mon Sep 21 2020