In this tutorial you will learn about the Laravel 8 Autocomplete Search from Database Example and its application with practical example.
In this Laravel 8 Autocomplete Search from Database Example tutorial, I will show you how to create a dynamic database driven ajax jquery autocomplete search in Laravel. In this tutorial we will create a dynamic search autocomplete which will fetch options from database table using bootstrap jquery.
Laravel 8 Autocomplete Search from Database Example
In this step by step tutorial I will demonstrate you with example creating a autocomplete search input which will fetch options from database. Please follow the instruction given below:
Step 1 : Download and Laravel 8
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel blog |
Setup Database Credentials
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=lara8blog DB_USERNAME=root DB_PASSWORD |
Step 2: Create Migration and Model
Now, in this step we will create migration file. Please run the following command:
|
1 |
php artisan make:migration create_items_table |
Once above command is executed there will be a migration file created inside database/migrations/ directory, just open migration file and update the function up() method as following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateItemsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('items', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('items'); } } |
Now, run the migration to create database table using following artisan command:
|
1 |
php artisan migrate |
Create model file “app/Models/Item.php” and put following code in item.php file:
app/Models/Item.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Item extends Model { use HasFactory; protected $fillable = [ 'name' ]; } |
Step 3: Create Route
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php 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('search', [SearchController::class, 'index'])->name('search'); Route::get('autocomplete', [SearchController::class, 'autocomplete'])->name('autocomplete'); |
Step 4: Create Controller
Now, lets create a controller named SearchController using command given below –
|
1 |
php artisan make:controller SearchController |
Once the above command executed, it will create a controller file SearchController.php in app/Http/Controllers/ directory. Open the SearchController.php file and put the following code in it.
app/Http/Controllers/SearchController.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\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
In this step, we will create view/blade file. Lets create a blade file “search.blade.php” in “resources/views/” directory and put the following code in it respectively.
resources/views/search.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title>Laravel 8 Autocomplete Search using Bootstrap Typeahead JS</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 8 Autocomplete Search using Bootstrap Typeahead JS</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: Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
|
1 |
http://localhost:8000/search |
