Laravel 10 Autocomplete Search from Database Tutorial

In Laravel, Autocomplete search is a useful feature that enhances the user experience by providing suggestions as the user types into a search field. 

Step 1: Install Laravel

composer create-project laravel/laravel example-app

Step 2: Add Dummy Users

php artisan migrate

let's create dummy records using below command:

php artisan tinker

Step 3: Create Controller


  namespace App\Http\Controllers;
  use Illuminate\Http\Request;
  use App\Models\User;
  use Illuminate\View\View;
  use Illuminate\Http\JsonResponse;
  class SearchController extends Controller
       * Display a listing of the resource.
       * @return \Illuminate\Http\Response
      public function index(): View
          return view('searchDemo');
       * Show the form for creating a new resource.
       * @return \Illuminate\Http\Response
      public function autocomplete(Request $request): JsonResponse
          $data = User::select("name")
                      ->where('name', 'LIKE', '%'. $request->get('query'). '%')
          return response()->json($data);

Step 4: Create Routes


    use Illuminate\Support\Facades\Route;
    use App\Http\Controllers\SearchController;
    | Web Routes
    | Here is where you can register web routes for your application. These
    | routes are loaded by the RouteServiceProvider within a group which
    | contains the "web" middleware group. Now create something great!
        Route::get('demo-search', 'index');
        Route::get('autocomplete', 'autocomplete')->name('autocomplete');

Step 5: Create blade File


<!DOCTYPE html>
    <title>Laravel 10 Autocomplete Search from Database -</title>
    <link href="" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src=""></script>
    <script src=""></script>
<div class="container">
    <h1>Laravel 10 Autocomplete Search from Database -</h1>   
    <input class="typeahead form-control" id="search" type="text">
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
            source: function (query, process) {
                return $.get(path, {
                    query: query
                }, function (data) {
                    return process(data);

Run Project:

php artisan serve

Now, Go to web browser, type the URL and see the output: