Laravel 7 Tutorial - Autocomplete Search

hi everyone welcome back to the laravel 7 tutorial in this video we are going to learn about auto complete search so let's see how can we create auto complete search so first of all create new controller so switch to the command prompt and here just create a new controller so just type here php artisan make controller and space controller name let's say controller name is product controller okay now press enter controller created now just create a model and migration okay for the product so just right here php artisan make model space model name let's say model name is product and dash m that's m for migration okay now press enter okay model created and migration it's creating all right migration has been created now switch to the project and just go inside the database folder and in migration and just open create product table migration okay here just add the column name table let's say data type a string and column name name okay now save the file now go to the uh product model so just open app directly and product this one okay now add here the table name so just write here protected dollar table equal to table name which is product table okay so just copy and paste here all right now just open product controller so just to go inside the http directory and then controllers and from here just open product controller okay now create a function here so just create a function for inserting records into the product table so just write here public function add products okay and create array product added so just right here product and array inside this array some element so just write here name let's say phone now copy this and paste iphone okay now change the name here just tablets laptops what television and let's have friends okay now just add here use app slash product okay product colon colon call the insert method just write here insert and just pass this variable product okay and simply return a message product has been inserted successfully all right now save the file and now let's create the route so just go to the web.php so just open routes folder and then wave.php okay okay just add the route this one okay add product product controller add product okay add this route now let's migrate the migration and call the add product route for adding record so switch to the command prompt and here first of all migrate the migration so just write here php artisan migrate okay now press enter okay okay product table migration has been migrated so let's check switch to the browser and just open php my admin and here just open the database student db okay inside this database you can see here the products table now click on browse okay you can see here the name column and this all right now run the project so just type here the command php artisan sir okay now press enter now access to the browser and just go to the add product okay now press enter you can see here the message product has been inserted successfully now let's check into the table so just click on brow uh refresh the page and you can see here the record phone table let's laptops watch television and fridge okay all right now let's create another function so go to the product controller so switch to the project and just click on product controller and here just create another function public function and function name let's say search okay and simply return a view so just write a return view search okay now add the route for this so go to the web.php and just write here route get search controller name which is product controller okay all right now create this view so go to the resources folder then views and inside the view just create new file search dot blade dot hp okay now inside the search.blade.php file add the html5 boilerplate so just click here exclamation sign and press tab okay now change the title let's say search and now add the bootstrap cdn so go to the get bookstrap.com and from here just click on get started and from here just copy the css cdn and just paste here now copy the js radian and here test okay now switch to the browser and just open google and here just search bootstrap for typing tdn okay now click on first link now just copy this cdn so just click here and test here okay this is the jquery slim version so just replace with just to go to the google and here search jquery cdn okay just open now copy the minified version and just copy now remove this very slim version and just paste here okay all right now just add the form here so just write here container container and just add some padding here style heading top let's say seven pizza here then column column md six and also set the offset so just write here offset md okay now create the card in card header okay and add here let's say search product this is the title okay card body and inside this card body just create a form okay inside the form create one element input text input so just write here from and form group okay and input type is equal to text class is equal to form control and class type ahead okay and pass folder access dot dot okay now save the file all right now let's check this route so just for the browser and here just write flash search okay you can see here the form search dot blade this is the spelling step from control okay now refresh the page okay all right now go to the controller and create another function so just open product controller and here just add another function public function and let's say function name is autocomplete okay and pass here request dollar request all right then just right here data is equal to product column column select just pass here the column name which is name arrow just write your head here name use the like predicate so just write here like percent sign and inside this curly bracket dollar request arrow okay and now call the gate method and here simply return response as a json so just right here json and inside this json just pass this data all right now save the file and just create a route for this function just copy this function and go to the web.php file and here just write route get or to complete controller name which is product controller and delete autocomplete okay also give the name here auto complete okay this is the route now save the file and go to the search.blade.php file and here just add a script so just write here the script type is equal to text slash javascript okay and inside this script tag just right here create a variable path and here call the route function and pass here the name autocomplete okay this one this one okay now color [Music] input dot this class type it hit and inside this function just ask the object which is source function pass two parameter first is terms and second one is process okay and here just return download terms column terms column terms okay and just write a comma then function data and here simply return processed data okay process and just pass here data all right this one this this okay and here the semicolon all right now save the file and all done so let's check so switch to the browser and just refresh the page just type here let's say you can see here tablets okay auto search is working here you can see here let's say delhi television okay if i press a uh let's say type your phone you can see here the phone okay tablet all right so in this way you can create autocomplete search in laravel 7 all right so that's all about autocomplete search so thanks for watching this video and if you are still have any kind of question you can ask me in the comment box don't forget to subscribe my channel thanks for watching

Channel: Surfside Media

Views: 4,398

Keywords: How, to, Program, laravel (Software), laravel, laravel v7, laravel 7, laravel project, laravel setting up, laravel v7 setting up, laravel v7.0, v7.0, laravel 7.0, laravel 7 playlist, laravel 7 tutorial, laravel 7 lesson, laravel 7 introduction, intro to laravel 7, laravel tutorial, laravel 7.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, autocomplete search in laravel, autocomplete search in laravel 7, typeahead in laravel 7, autocomplete search

Id: NaH2q0JocQc

Length: 20min 12sec (1212 seconds)

Published: Wed Aug 12 2020