Search functionality for substring in titles

  laravel, php, sql

I am trying to implement a search functionality in my webpage.

This is my Controller code:

class PostController extends Controller
{

    public function index(Request $request) {


        $posts = Post::get();

        if($request->has('s')) {
            $query = strtolower($request->get('s'));
               $posts = $posts->filter(function ($post) use ($query) {
                   if (Str::contains(strtolower($post->titel), $query)) {
                       return true;
                   }
                   return false;
               });

        }
        return view('posts.overview', ['posts' => $posts]);
    }
}

This is the blade file whith the search bar:

@extends('layouts.app')

@section('content')
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <div class="flex justify-center">
        <div class=" w-11/12 bg-gray-400 p-6 rounded-lg font-serif text-4xl font-bold bg-opacity-70 subpixel-antialiased tracking-wide not-italic">
            <h1 class="flex justify-center mb-10"> √úbersicht der Stellenanzeigen </h1>


                @foreach($posts as $post)
                    <div class="p-10 grid-cols-3 grid-rows-3 gap-4 shadow-2xl mb-10 bg-gradient-to-r from-green-400 to-blue-500 border-solid border-2 border-black rounded-lg">

                        <form class=" mb-5 flex w-full justify-center items-end" action=" {{ route('overview') }}" method="get">
                            <div class="relative mr-4 w-full lg:w-1/2 text-left">
                                <input type="text" id="s" name="s" value=" {{ request()->get('s') }}" class="w-full bg-gray-100 bg-opacity-50 rounded focus:ring-2 focus:ring-indigo-200 focus:bg-transparent border border-gray-300 focus:border-indigo-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
                            </div>
                            <button class="text-white px-4 py-3 rounded text-base font-medium
                                bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">Suchen</button>
                        </form>
                        <!--Card 1-->
                        <a href="{{ 'bewerben' }}">
                        <div class="overflow-hidden row-span-3 bg-gray-100 shadow-2xl border-solid border-2 border-gray-500 rounded-lg">
                            <div class="pt-2 pl-6 mt-3"> {{ $post->Titel }}</div>
                            <div class="px-6 py-4 mt-2 ring-4 ring-opacity-90">
                                <button type="submit" class="text-white px-4 py-3 rounded text-base font-medium
                                bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
                                duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" onclick="window.location=' {{ url('bewerben') }}'">Direkt bewerben!</button>


                                <div class="pt-2 pl-4 font-medium text-base font-bold font-serif"> Standort: {{ $post->Standort }}</div>

                                <div class="pt-2 pl-4 font-medium text-base font-bold font-serif"> Kontakt: {{ $post->Kontakt }}</div>
                                <button type="submit" class="text-white px-4 py-3 rounded text-base font-medium
                                bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">Details!</button>
                                <div class="pt-2 pl-4 font-medium text-base font-bold font-serif"> Startdatum: {{ $post->startdate }}</div>
                                <div class="pt-2 pl-4 font-medium text-base font-bold font-serif"> Enddatum: {{ $post->enddate }}</div>


                                <div class="px-6 pt-4 pb-2"> </div>
                            </div>

                        </div>
                        </a>
                    </div>
                        @endforeach

                    </div>

        </div>

@endsection

When I Am trying to search for a term that is included in one listing then I just get an empty page with no results, like so:

Before search:

https://i.stack.imgur.com/wRCwZ.jpg

After search:

https://i.stack.imgur.com/dx3r0.png

I don’t know why I get no results returned. If you need any more code let me know!

Source: Laravel

Leave a Reply