Ajax Autocomplete Search in Laravel 7

Step 1: Install laravel 7 using composer

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

Step 2: Going inside of project using the command

cd laravel7search

Step 3: Setup MySQL database

Now, configure this database in the .env file.

  [email protected]

Step 3: Create Migration and Model

In this step, we have to create a migration for students table using Laravel 7 PHP artisan command, so first fire bellow command:

php artisan make:migration create_students_table

After this command we will find one file in following inside of “database/migrations” and you need to put bellow code in your migration file for create students table.

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateStudentsTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('students', function (Blueprint $table) {
     * Reverse the migrations.
     * @return void
    public function down()

Now run the migration command

php artisan migrate

After create “students” table you should create Student model for students, so first create file in this path “app/Student.php” and put bellow content in Student.php file:


namespace App;
use Illuminate\Database\Eloquent\Model;
class Student extends Model

Step 3: Create Route

Here I am going to create routes to diplay view and ajax method. now open “routes/web.php” file and put below code.


 Route::get('search', '[email protected]')->name('search');
 Route::get('autocomplete', '[email protected]')->name('autocomplete');

Step 4: Create Controller

Now, I am going to create a controller name SearchController. I am putting two method index() and autocomplete() on that controller like as you can see below:


namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Item;
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 = Item::select("name")
        return response()->json($data);

Step 5: Create View File

Now create search.blade.php(resources/views/search.blade.php) for layout and lists all items code here put inside of this file.

<!DOCTYPE html>
    <title>Laravel 7 Autocomplete: Real Programmer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<div class="container">
    <h1>Laravel 7 Autocomplete: Real Programmer</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);

Step 6: Generating dummy data
Add some dummy data in the student table

Now you can open bellow URL on your browser:

php artisan serve

Leave a Comment