In this video we are going to learn about Search Services.
So let see how can we make home page search box working.
So first of all lets create a controller.
So switch to the command prompt and for crating controller just run the command.

php artisan make:controller SearchController

Now switch to the project and lets open the SearchController.
Now here lets create function for auto complete and search services.
So in SearchController write the following code.

<?php

namespace App\\Http\\Controllers;

use App\\Models\\Service;
use Illuminate\\Http\\Request;
use Illuminate\\Support\\Str;

class SearchController extends Controller
{
    public function autocomplete(Request $req)
    {
        $data = Service::select('name')->where(\"name\",\"LIKE\",\"%{$req->input('query')}%\")->get();
        return response()->json($data);
    }

    public function searchService(Request $req)
    {
        $service_slug = Str::slug($req->q,'-');
        if($service_slug)
        {
            return redirect('/service/'.$service_slug);
        }
        else
        {
            return back();
        }
    }
}

Now go to the web.php file and here lets create route so write here.

Route::get('/autocomplete',[SearchController::class,'autocomplete'])->name('autocomplete');
Route::post('/search',[SearchController::class,'searchService'])->name('searchService');

Now go to the base.blade.php layout file And add the @stack directive befor @livewireScripts

@stack('scripts')
@livewireScripts

Now go to the home-component.blade.php view file and here letes add the the following code on bottom of the page.

@push('scripts')
    <script type=\"text/javascript\">
        var path = \"{{route('autocomplete')}}\";
        $('input.typeahead').typeahead({
            source: function(query,process){
                return $.get(path,{query:query},function(data){
                    return process(data);
                });
            }
        });    
    </script>
@endpush

And inside the search form add the action and also add @csrf as following.

 <div class=\"filter-title\">
            <div class=\"title-header\">
                <h2 style=\"color:#fff;\">BOOK A SERVICE</h2>
                <p class=\"lead\">Book a service at very affordable price, </p>
            </div>
            <div class=\"filter-header\">
                <form id=\"sform\" action=\"{{route('searchService')}}\" method=\"post\">     
                    @csrf                   
                    <input type=\"text\" id=\"q\" name=\"q\" required=\"required\" placeholder=\"What Services do you want?\"
                        class=\"input-large typeahead\" autocomplete=\"off\">
                    <input type=\"submit\" name=\"submit\" value=\"Search\">
                </form>
            </div>            
        </div>

Now its done so lets check it.
So switch to the browser and refresh the page.
Now in search box lers type any service name which you want to search lets search here.
A, and you can see here auto populated services now lets select any service from this list.
And click on search.
Now here you can see the services details of searched service.
So in this way you can create Search box for services.