Laravel 11 Autocomplete Search from Database |
Laravel 11 Autocomplete Search from Database |

Laravel 11 Autocomplete Search from Database


In web development, autocomplete search functionality enhances user experience by providing real-time suggestions as users type into a search field. Laravel, a popular PHP framework, makes implementing autocomplete search easy and efficient. In this tutorial, we’ll walk through the process of building an autocomplete search feature in Laravel 11 using a database.

Prerequisites: Before we dive into the tutorial, make sure you have the following prerequisites installed:

  • Laravel 11 or later
  • Composer (PHP dependency manager)
  • Basic knowledge of PHP and Laravel

Step 1:

Set Up a Laravel Project If you haven’t already, create a new Laravel project using Composer by running the following command in your terminal:

composer create-project --prefer-dist laravel/laravel autocomplete-search-example

Step 2:

Database Setup Next, set up your database and create a table for the data you want to search. For this example, let’s assume we have a table named “products” with a column called “name” that we want to search through.

Step 3:

Create a Model In Laravel, models are used to interact with the database. Create a model for your “products” table by running the following Artisan command:

php artisan make:model Product

Step 4:

Define Routes Open your routes/web.php file and define a route for the autocomplete search functionality:

use App\Http\Controllers\ProductController;

Route::get('/autocomplete', [ProductController::class, 'autocomplete']);

Step 5:

Create Controller Generate a controller named ProductController using Artisan:

php artisan make:controller ProductController

Step 6:

Implement Autocomplete Logic In your ProductController, define a method named autocomplete to handle the autocomplete search logic:

use App\Models\Product;

class ProductController extends Controller
    public function autocomplete(Request $request)
        $search = $request->get('term');
        $products = Product::where('name', 'like', '%' . $search . '%')->pluck('name');
        return response()->json($products);

Step 7:

Create View Create a view file named autocomplete.blade.php where you will implement the autocomplete search field:

<!DOCTYPE html>
    <title>Autocomplete Search</title>
    <link href="" rel="stylesheet" />
    <script src=""></script>
    <script src=""></script>

<div style="width: 500px; margin: 0 auto; padding: 50px;">
    <h2>Autocomplete Search</h2>
    <select class="js-example-basic-single" style="width:100%">
        <option value=""></option>

<script type="text/javascript">
    $(document).ready(function() {
            placeholder: 'Search for a product',
            ajax: {
                url: '/autocomplete',
                dataType: 'json',
                delay: 250,
                processResults: function(data) {
                    return {
                        results: data
                cache: true


Step 8:

Test Your Application Finally, test your autocomplete search functionality by serving your Laravel application and accessing the /autocomplete route in your browser.


Congratulations! You’ve successfully implemented autocomplete search functionality in Laravel 11 using data from a database. Autocomplete search enhances user experience by providing real-time suggestions as users type, improving the overall usability of your web application. Feel free to customize and expand upon this example to suit your specific project requirements.

Leave a Reply