DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Kingsconsult
Kingsconsult

Posted on • Updated on

How to implement search functionality in laravel 8 and laravel 7 downwards

Today, I am going to drop a simple hint, how to implement search functionality in your crud app, this will allow you to just get a specific item or items that have a similar name from the search result in a list of hundreds or even thousands of data from the database.
I am going to modify our index method from our previous app Laravel 8 CRUD, in case you just need the code, you can get it from the GitHub repo.

Click on my profile to follow me to get more updates.

Step 1: Modify the index method in the project controller

  1. Add Request $request as a parameter to the Index method
  2. Edit the query to get all the projects index method in controller
    • In the first parameter for our β€œwhere” clause, we are going to only query the projects that the name is not null.
    • In the second parameter, we are going to query the projects that the request is bringing, in our case where the request is similar to the name of the project.
    • You can choose to order how your search results show up, I order mine according to the descending order of id.

Step 2: add the form that will send the request to the controller in index.blade.php

I added the following

  1. An input tag (where the user will enter the text to search).
  2. A submit button (This will trigger the search functionality after the text has been added).
  3. Another button to refresh our search result.
   <div>
        <div class="mx-auto pull-right">
            <div class="">
                <form action="{{ route('projects.index') }}" method="GET" role="search">

                    <div class="input-group">
                        <span class="input-group-btn mr-5 mt-1">
                            <button class="btn btn-info" type="submit" title="Search projects">
                                <span class="fas fa-search"></span>
                            </button>
                        </span>
                        <input type="text" class="form-control mr-2" name="term" placeholder="Search projects" id="term">
                        <a href="{{ route('projects.index') }}" class=" mt-1">
                            <span class="input-group-btn">
                                <button class="btn btn-danger" type="button" title="Refresh page">
                                    <span class="fas fa-sync-alt"></span>
                                </button>
                            </span>
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

That is all, this is our result below
all the projects in the database
complete projects
only projects with laravel in the name
only projects with laravel
only projects with mana in the name
only projects with mana
only projects with 1 in the name
only projects with 1

as usual, You can follow me, leave a comment below, suggestion, reaction, or email me.
Click on my profile, to see my other post and contacts

Top comments (9)

Collapse
 
msamgan profile image
Mohammed Samgan Khan

nice article. good job.
but a much easier way can be as follows.

public function index()
{
        $project = Project::query();
        if (request('term')) {
            $project->where('name', 'Like', '%' . request('term') . '%');
        }

        return $project->orderBy('id', 'DESC')->paginate(10);
}
Enter fullscreen mode Exit fullscreen mode

IN laravel you can break the query in pieces.

Collapse
 
favalcodes profile image
Favour Ezinne Arua

Hi Kings, Love your article, it really helps.
I'm a beginner although not a total beginner(lol), I'm actually trying to accomplish this with Laravel 7, I'm working on a blog site(my first Laravel site actually), after doing all you said and replacing the projects with post for my own project, I'm getting an error of "Route [post.index] not defined, Please how can I solve this, waiting for your response, cheers

Collapse
 
kingsconsult profile image
Kingsconsult Author

you don't need to change your route from GET to POST, if you are using resource route, just add the Request $request to the index, it will work

Collapse
 
favalcodes profile image
Favour Ezinne Arua

I didn't change the method, I'm still using get, I only changed where you had projects.index to posts.index because mine is a blog, I want the search to work users blog posts

Thread Thread
 
kingsconsult profile image
Kingsconsult Author

Unless I see your code, I can't be sure

Thread Thread
 
kingsconsult profile image
Kingsconsult Author

If you still getting the errors, you can contact me through my contacts, so we can go through it together

Collapse
 
mohammadfouladgar profile image
Fouladgar.dev

Nice!
If you want to have a advanced filter in Laravel, you can check out this package:
github.com/mohammad-fouladgar/eloq...

Collapse
 
rajjoshidev profile image
Raj Joshi

Hey good job Kings,

Loved the article. Helped me to learn something new with query building in laravel.

Collapse
 
siapeeeenih profile image
nyenyenye

hello, thanks for the tutorial.... but why is the search button position in my project not the same as yours? Please help πŸ˜…

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›