Laravel 8 Autocomplete Search from Database Tutorial

Laravel 8 autocomplete textbox search using jQuery ajax. In this tutorial, you will learn how to implement textbox search from database in laravel 8 app using jQuery ajax.

In this tutorial, we will create simple product search text box. After that, will implement jQuery and ajax code to search autocomplete or auto-fill data from database in laravel 8 app.

Laravel 8 Autocomplete Textbox Search Tutorial

  • Step 1 – Install Laravel 8 App
  • Step 2 – Database Configuration Database
  • Step 3 – Make Model and Migration
  • Step 4 – Make Routes
  • Step 5 – Create Controller
  • Step 6 – Create Blade View
  • Step 7 – Implement jQuery Ajax Code
  • Step 8 – Run Development Server

Step 1 – Install Laravel 8 App

First of all, execute the following command on command prompt to install/download laravel 8 fresh setup in your system or server:

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

Step 2 – Database Configuration Database

In this step, connect to laravel 8 app to database. So open .env file and add the database detail like following:

 DB_CONNECTION=mysql 
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Step 3 – Make Model and Migration

In this step, execute the following command on command prompt to create product model and migration file:

php artisan make:model Product -m

Then open product.php file and add the following code into it, which is placed on app/model directory:

<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model; class Product extends Model
{ use HasFactory; protected $fillable = [ 'name' ];
}

After that, open create_products_tables.php and add the following code into it, which is placed on database/migration directory:

<?php use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration; class CreateProductsTable extends Migration
{ /** * Run the migrations. * * @return void */ public function up() { Schema::create('products', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('products'); }
}

Step 4 – Make Model and Migration

In this step, create two routes one for the show search box and second for autocompleting search data using jquery and ajax:

<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\AutoCompleteController; /*
|--------------------------------------------------------------------------
| 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('search', [AutoCompleteController::class, 'index'])->name('search');
Route::get('autocomplete', [AutoCompleteController::class, 'autocomplete'])->name('autocomplete');

Step 5 – Create Controller

In this step, create a controller name AutoCompleteController by executing the following command on command prompt:

php artisan make:controller AutoCompleteController

Then open AutoCompleteController.php and add the following code into this file, which is placed on app/http/controllers directory:

<?php namespace App\Http\Controllers; use Illuminate\Http\Request;
use App\Models\Product; class AutoCompleteController extends Controller
{ /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { return view('autocomplete-search'); } /** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function autocomplete(Request $request) { $res = Product::select("name") ->where("name","LIKE","%{$request->term}%") ->get(); return response()->json($res); }
}

Step 6 – Create Blade View

In this step, Go to resources/views directory and create blade view file name autocomplete-search.blade.php.

Then add the following code into autocomplete-search.blade.php:

<!DOCTYPE html>
<html>
<head> <title>Laravel 8 Autocomplete Textbox From Database with jQuery Ajax - Tutsmake.com</title> <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="text/javascript"> var siteUrl = "{{url('/')}}"; </script>
</head>
<body> <div class="container mt-4"> <div class="card"> <div class="card-header text-center font-weight-bold"> <h2>Laravel 8 Autocomplete Textbox From Database using jQuery ajax - Tutsmake.com</h2> </div> <div class="card-body"> <form name="autocomplete-textbox" id="autocomplete-textbox" method="post" action="#"> @csrf <div class="form-group"> <label for="exampleInputEmail1">Search Product By Name</label> <input type="text" id="name" name="name" class="form-control"> </div> </form> </div> </div> </div> <script src="{{ asset('auto.js') }}"></script>
</body> </html> 

Step 7 – Implement jQuery Ajax Code

In this step, Navigate public directory and create one file name auto.js.

Then add the following code in auto.js file:

 $(document).ready(function() { $( "#name" ).autocomplete({ source: function(request, response) { $.ajax({ url: siteUrl + '/' +"autocomplete", data: { term : request.term }, dataType: "json", success: function(data){ var resp = $.map(data,function(obj){ return obj.name; }); response(resp); } }); }, minLength: 2 });
}); 

Step 8 – Run Development Server

Now, execute the php artisan serve command on command prompt to start your server :

 php artisan serve

Then open browser and fire the below url on it:

 http://localhost:8000/search

Conclusion

Laravel 8 autocomplete search from database example tutorial, You have learned how to implement an autocomplete search in our laravel 8 application.

If you have any questions or thoughts to share, use the comment form below to reach us.

Related Posts