Real Programmer
Laravel

Ajax Autocomplete Search in Laravel 7

3 Mins Read
Pinterest LinkedIn Tumblr

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.

  DB_CONNECTION=mysql
  DB_HOST=127.0.0.1
  DB_PORT=3306
  DB_DATABASE=laravel7search
  DB_USERNAME=root
  DB_PASSWORD=root@123

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.

<?php
  
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) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('students');
    }
}

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:

app/Student.php

<?php
  
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.

routes/web.php

 Route::get('search', 'SearchController@index')->name('search');
 Route::get('autocomplete', 'SearchController@autocomplete')->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:

app/Http/Controllers/SearchController.php

<?php
  
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")
                ->where("name","LIKE","%{$request->query}%")
                ->get();
   
        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>
<html>
<head>
    <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>
</head>
<body>
   
<div class="container">
    <h1>Laravel 7 Autocomplete: Real Programmer</h1>   
    <input class="typeahead form-control" type="text">
</div>
   
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get(path, { query: query }, function (data) {
                return process(data);
            });
        }
    });
</script>
   
</body>
</html>

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

Related Posts

Write A Comment