In this tutorial you will learn about the How to Create AJAX Autocomplete Search in Laravel 8 with Select2 and its application with practical example.
In this How to Create AJAX Autocomplete Search in Laravel 8 with Select2 tutorial, I will show you how to create dynamic ajax driven autocomplete with select2 in laravel. In this tutorial you will learn to create dynamic ajax driven autocomplete with select2 in laravel. In this example we will be using Select2 jQuery plugin in Laravel 8 with AJAX.
How to Create AJAX Autocomplete Search in Laravel 8 with Select2
The jquery Select2 plugin is used to create dynamic autocomplete input with several options. In this example you will learn how to implement Select2 autocomplete in laravel.
- Install Laravel 8 Application
- Database Configuration
- Create product Table and Model
- Create Routes
- Create Controller
- Create View
Step 1 : Install Laravel Application
First of all we need to create a fresh laravel project, download and install Laravel using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel blog |
Step 2: Database Configuration
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 |
DB_HOST=localhost DB_DATABASE=homestead DB_USERNAME=homestead DB_PASSWORD=secret |
Step 3: Create product Table and Model
Now, in this step we will create model and migration file. Please run the following command:
|
1 |
php artisan make:model Product -m |
After this command you have to put bellow code in your migration file for create product table.
/database/migrations/2020_03_05_100722_create_product_table.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 30 31 32 |
<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateProductsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('products', function (Blueprint $table) { $table->id(); $table->string('name'); $table->integer('price'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('products'); } } |
Now, in this step we will create model and migration file. Please run the following command:
|
1 |
php artisan migrate |
After you have to put bellow code in your model file for create product table.
/app/Product.php
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Product extends Model { protected $fillable = [ 'name', 'price', ]; } |
Step 4: 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 |
Route::get('select2', 'Select2AutocompleteController@index'); Route::get('/select2-autocomplete-ajax', 'Select2AutocompleteController@dataAjax'); |
Step 5: Create Controller
Now, lets create a controller named Select2AutocompleteController using command given below –
|
1 |
php artisan make:controller Select2AutocompleteController |
In this controller will add following two methods:
1)index()
2)dataAjax()
Now, put the following code in ItemController.php file. /app/Http/Controllers/Select2AutocompleteController.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 30 31 32 33 34 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Product; class Select2AutocompleteController extends Controller { /** * Show the application layout. * * @return \Illuminate\Http\Response */ public function index() { return view('select2.index'); } /** * Show the application dataAjax. * * @return \Illuminate\Http\Response */ public function dataAjax(Request $request) { $data = []; if($request->has('q')){ $search = $request->q; $data =Product::select("id","name") ->where('name','LIKE',"%$search%") ->get(); } return response()->json($data); } } |
Step 6: Create View
In this step we will create laravel blade view file as following:
/resources/views/select2/index.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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html> <head> <title>Laravel - Dynamic autocomplete search using select2 JS Ajax/title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> </head> <body class="bg-dark"> <div class="container mt-4"> <div class="row"> <div class="col-md-8 offset-md-2"> <div class="card"> <div class="card-header"> <h4>Laravel Dynamic autocomplete search using select2 JS Ajax</h4> </div> <div class="card-body"> <div class="row"> <div class="col-md-12"> <select class="itemName form-control" name="itemName"></select> </div> </div> </div> </div> </div> </div> </div> </body> <script type="text/javascript"> $('.itemName').select2({ placeholder: 'Select an item', ajax: { url: '/select2-autocomplete-ajax', dataType: 'json', delay: 250, processResults: function (data) { return { results: $.map(data, function (item) { return { text: item.name, id: item.id } }) }; }, cache: true } }); </script> </html> |
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/select2 |
