How to Autocomplete Search Using Materializecss in Laravel

[Music] hello a Solomonic phone I am fat Uncle Joe Aparna welcome back to my channel well today I will show you how to auto search using material CSS there is a multiple ways to do the autocomplete but today I will use just the material senses so let's do it we've got PSP I write this line so you can write this one then it will go through this controller this function so in control I just defined this one and there is the V apart and we already play this file and this fan is I've prepared the view part using material CSS which is all there is is a CSS framework just make a view the beautiful if you want to use the view that I am using I will be using so you can go get lab calm slash bones and then this here are you find it 5-3 here there is the just copy this one and just paste here and save go to the browser there is abuses the view part nothing special here if you see I improved this one since we are using the material pheromone that's why I input this CSS fine also these marriages and this jQuery will be used in nest there's I also include this file and if you go there right around and put this link if you eating stir it in CDN you find this material material finds there's mean CSS and J's file and for all to load where is the Ottoman that I will use all we need pharaoh here from the database for database each lamp calm if you see there is a sample database download this and import your own database here I use this database customer table well so we have to get these database and then show it in here this field customer name you can get this data base way like if we browse and that way you can also find the data like for that we can use chick-fil-a yeah I write this line here this document or Dom actually your this browser pace along with your CSS JS files image everything that's including this space so that is the document or Tom in a short and this lines actually meaning that when your document will be easy with all your files then it will run this function so when this pace will be ready there's document will be ready this function will be conducted so let's just write it for thought no that's for whatever is thing nothing else then this and go to browser in browser you feel this conditioner rightly then click respect it is well then go to console in the if you say then if you refresh ponder shifter or controller there's been that brother is depreciate you say you can see this there's mean this drop when you successfully loaded okay in the native steps whenever this document will be ready or this space will be loaded we will get the data from the database so for that on dynamical the phrase that pays we can use edge ox get the data out or reference the pace and each have some options right that's mean it will be we step off because we want to use we use it some there is also but we will do state because we need to get the data that's why and then URL so here is the URL so what will happen when the pace will be fresh it will get the data so it will go this link that means find customers last one because customers for that URL I right here find customers so it will go these come to lock this function then in this function or at least line that is this gate customer will come here and this is the database data model customer so I read here that sister model in model right this line oh yeah it will get the data and this is the data we will send this data and after getting the data you doing so if it come the request consensus will be which we will come here in stock in this subset it will come and suppose the response you can write here the user define it is we will see this kind of data limit dating and then I transpose just sieve so I probably happen when the phase will be when the pace will be rotate then it will go this URL and here is the URL different defined then you can this function and this is the data which we are getting from the table and it will be returned and in the view when it will come successfully then we will see that database or the data from the controller so there's the fresh water script car if you see we're getting data as array that is 25 die and say size is to define 0 in this array 1 index array so this is the column name this is the sig second number column data so we are getting that data but we are getting a zit and creating data now here we will use the material CSS Auto for that you can all come here just copy these and this here so since so that it's a place that matter I hear use ID ID attribute to be that and then I do me this one well this is the data so there's right here just atom and then six people are okay there is a euro we're getting on code type error cannot see okay why we're getting this that is metal CSS when you use this drop-down you have to use that is the area where we are in Kuta autocomplete so right so deep in film data and please spot for this one and I'm just pissed and save this one come to the shifter okay there is no you know right now let's see nothing is coming in the third audio source because um if you see this data actually in metal sis's there is a things the type will be update but we are getting the data from database as the array so this is array but these actually accept object so we have to convert this array to object so let's do the convert part here I write this line for the converting word if you see one but we have to convert this one like just this way lovely darling turn something then they want just something then so we this is the desire form yet for that I just the data we getting from the database I just put here in this variable then I just initialize this array by for that one okay and I look true because now we are getting array from the database so if we look to from 0 since it is stirring from 0 and so it will it will come then it will take the name because we're in or to load I want to use this this column name and data cast this one equal to now and this will be included in implemented up to the length of this area so these will actually create this probably 0 in this this one I could do one this one I going to play this one this way it will create a so on so if we just write pontil to trot log and just copy this one let's write this one what reform if you'll see here we're getting the this way and if you're right you're not getting down out road yet because you didn't use this one just copy this one because this is the object right now the desire object and this job and save Ryerson yes we are getting the data is your daughter one interesting thing is that if you say this is now because if we write something here like age there is just only the name but there is no if like all right HT yeah yes safe Victor right you can see there the link because this link appears I right here is still appears so you can write here that will be appear and with your visa customer name but suppose you don't need any just a name so the up to this this is okay now suppose you select something and now you want to after the selected name you want to push the the respected code and grunty here for that after the when the auto-completed will be done this motion can be called so copy this one best you if you say this is up to this one right now if right yeah something's today and there is the Vols so Paul is selected or reading the desirer will create here similar like this will create another object probably this is two and this one and just copies in our way we will create this for searching the data and just write this one also here just to you can see what is this is structure if you see other object is name and equal to there is the desire things so we can't using this Aki name that is a customer name we can get that respected code name country city so to access this one yeah the opening is just pure this is the resume in the selected name because I yeah yes this is working so this way you can also put that data this is the way you can do the material material autocomplete okay there is another approach to get the data from the database and for that this this is the converting part when the database data will be converted then this is such a star material so now we have to do the darkness things so for that there is it added practice that you can use what will happen that from the controller to your view you can send the piece be payable to your Jie so for that I just if you go there alright if I don't show you the process just click here because I already prepared a video you can also see this video or get for more explanation so what will happen I will explain one by one like first of all in composer you will write this line so I already write my this line in my terminal or what's a composer so I will not write this line then after this line you will make sure that this line is included so in composer you'll check that this line is you have this line then after this you will go on free then app don't miss be that provider in provider add this line so provider I already and this line then here like this way you add this line this is doesn't in this one and in composer write this or timeline just write this line and this is the computer show so after doing this one fan will be in your credit that is hundred ohm confi then JavaScript please be there you will find that it will be put on so I just rename and rename this name and here I just write also this is really defined this one whenever well this will be the global variable there our JavaScript will be great will be a patrol include and this will be the view okay so in view we create this file I already create this file here same name whatever beautiful and here there is no nothing inside this file and that in view this the script files really include it will be photograph you dot plate dot P speed will include here in this file but then is this this line and we don't need this one anymore just this year and here you have to post your IDs Travis so whenever you enter the phase so it will get that at a place and then let's write this line become this link it will come this controller so there is the this is the data path data and this one is actually transferring your this variable to your view that is this view so if you right here during con JavaScript all right this global variable so accessing this data we have to write here in the view dot and this is the nickname of the variable so right here and save just yes here so that data based data will be as in here so cast array actually the database data then we just initialize this one this this one for the autocomplete search input box and this one for later when the autocomplete will be completed we we will use this object so we create this one for autocomplete and this one for after the water complete one so this is the comforting part edit object then in autocomplete just we set up the database that is the autocomplete part and after the autocomplete part we just put this way too so if you see just save this one and control hitter and right well this is working very well these and other things this is minimum length that is the minimum number of character or when you're right - - menu you have the source will be completed like this there's mean you have to write - later then the officers will become and they mutually the limit fat that is after 5 meting will be tween so save this one can be upon - shifter nothing will happen no ocean is happening well that's it that's it so because after riding - if I write here 1 and then save con disappear right well disapprove 5 because there is the limit is 5 and if I write just delay that will be unlimited know all the source so there is all the person is coming ok there's all today well another things that is for after autocomplete I just use for this line but similar way here you can use ejects the way you st. database from the GS to the controller the way I first one show you so you can use as else then you know in success you can write this two line but not this one that will be the other the success function parameter here will be one okay that's all today [Music] you

Channel: bons

Views: 3,389

Keywords: AutocompleteSearchLaravel, LaravelAutocompleteMaterialize, LaravelAutoSearch, Laravel Autocomplete Search from Database using Materialize CSS, laravel autocomplete search, bons, bonstutorial, LaravelSearchWithoutReload, Laravel Search Lists without page refresh, Laravel Search in Textbox dropdown, Autocomplete, Search, Filter, Laravel, Easy Search in Laravel, Materializecss, Autocomplete with Laravel & Materializecss, laravel autocomplete search textbox, How to Autocomplete Search in Laravel

Id: fYRdT56l0fo

Length: 29min 58sec (1798 seconds)

Published: Tue Jan 21 2020