Laravel Autocomplete Search From Database




Hi Dev,

Today, I will learn you search dropdown autocomplete from database in laravel. You just follow step by step to create autocomplete search box from database with jquery in laravel.

In this example I will use Bootstrap Typeahead JS plugin for auto-complete, Typeahead. You can implement autocomplete in your laravel application just following few step.

Step 1 : Install laravel Fresh App

In this step, You can install laravel fresh app using bellow command.

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Create Model and Table

In this step, we have create model and table migration, So bellow command used to create table migration.

php artisan make:migration create_blogs_table

After this You will find one file in following path "database/migration" and you have to put bellow code.


use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateBlogsTable extends Migration



* Run the migrations.


* @return void


public function up()


Schema::create('blogs', function (Blueprint $table) {







* Reverse the migrations.


* @return void


public function down()





Then after, Simply run bellow command

php artisan migrate

After create "blogs" table you should create Blog model for blogs.



namespace App;

use Illuminate\Database\Eloquent\Model;

class Blog extends Model



Step 3 : Create Route

In this step you can create route for display view and ajax method and put bellow code.


Route::get('search', 'SearchController@index')->name('search');

Route::get('autocomplete', 'SearchController@autocomplete')->name('autocomplete');

Step 4 : Create Controller

In this step we have to create new controller as SearchController and put bellow code.



namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Blog;

class SearchController extends Controller



* Display a listing of the resource.


* @return \Illuminate\Http\Response


public function index()


return view('search');



* Show the form for creating a new resource.


* @return \Illuminate\Http\Response


public function autocomplete(Request $request)


$data = Blog::select("name")



return response()->json($data);



Step 5 : Create View File

In this step You can create laravel blade file for display view and put bellow code.


<!DOCTYPE html>



<title>Laravel Autocomplete Search From Database -</title>

<link rel="stylesheet" href="" />

<script src="//"></script>

<script src=""></script>



<div class="container">

<h1>Laravel Autocomplete Search From Database -</h1>

<input class="typeahead form-control" type="text">


<script type="text/javascript">

var path = "{{ route('autocomplete') }}";


source: function (query, process) {

return $.get(path, { query: query }, function (data) {

return process(data);







Make sure you have some dummy data on your items table before run this example. Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:


It will help you...

#Laravel 6


#Laravel 7