How to Load data using jQuery AJAX in Select2 – Laravel 8
Select2 is easy to initialize on an element. It allows loading data with and without AJAX.
In this tutorial, I show how you can load MySQL database data in select2 using jQuery AJAX in the Laravel 8 project.
1. Database Configuration
Open .env file.
Specify the host, database name, username, and password.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=
2. Table structure
- Create
employeestable using migration and add some records.
php artisan make:migration create_employees_table
- Now, navigate to
database/migrations/folder from the project root. - Find a PHP file that ends with
create_employees_tableand open it. - Define the table structure in the
up()method.
public function up()
{
Schema::create('employees', function (Blueprint $table) {
$table->id();
$table->string('username');
$table->string('name');
$table->string('email');
$table->timestamps();
});
}
- Run the migration –
php artisan migrate
- The table is been created.
3. Model
Create Employees Model.
php artisan make:model Employees
- Specify mass assignable Model attributes – username, name, and email using the
$fillableproperty.
Completed Code
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Employees extends Model
{
use HasFactory;
protected $fillable = [
'username','name','email'
];
}
4. Controller
Create a EmployeesController controller.
php artisan make:controller EmployeesController
Create 2 methods –
- index() – Load
indexview.
- getEmployees() – This method is used to handle AJAX requests.
Assign POST search value to $search variable.
If $search is empty then fetch 5 records from the employees table and assign to $employees otherwise, select 5 records where $search value exists in the name field using like.
Loop on the $employees and initialize $response Array with id and text keys.
Return $response in JSON format.
Completed Code
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Employees;
class EmployeesController extends Controller {
public function index(){
// Load index view
return view('index');
}
// Fetch records
public function getEmployees(Request $request){
$search = $request->search;
if($search == ''){
$employees = Employees::orderby('name','asc')->select('id','name')->limit(5)->get();
}else{
$employees = Employees::orderby('name','asc')->select('id','name')->where('name', 'like', '%' .$search . '%')->limit(5)->get();
}
$response = array();
foreach($employees as $employee){
$response[] = array(
"id"=>$employee->id,
"text"=>$employee->name
);
}
return response()->json($response);
}
}
5. Route
- Open
routes/web.phpfile. - Define 2 routes –
- / – Load index view.
- /getEmployees – This is used to send AJAX POST request to fetch the employees list.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EmployeesController;
Route::get('/', [EmployeesController::class, 'index']);
Route::post('/getEmployees', [EmployeesController::class, 'getEmployees'])->name('getEmployees');
6. View
Create a new index.blade.php file in resources/views/ folder.
HTML –
- Stored CSRF token in the
<meta >tag. - Include select2 and jQuery libraries.
- Create a
<select id='sel_emp' >element.
jQuery –
- Read
csrf_tokenfrom meta tag and assign toCSRF_TOKENvariable. - Initialize select2 on
#sel_empelement. - Using
'ajax'option to send AJAX POST request to'getEmployees'. SetdataType: 'json'. - With
datapass the typed value and CSRF token as data –_token: CSRF_TOKEN, search: params.term. - Handle AJAX response with
processResults. Initializeresultswith theresponse.
Completed Code
<!DOCTYPE html>
<html>
<head>
<title>How to Load data using jQuery AJAX in Select2 – Laravel 8</title>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<!-- For defining select2 -->
<select id='sel_emp' style='width: 200px;'>
<option value='0'>-- Select employee --</option>
</select>
<!-- Script -->
<script type="text/javascript">
// CSRF Token
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$(document).ready(function(){
$( "#sel_emp" ).select2({
ajax: {
url: "{{route('getEmployees')}}",
type: "post",
dataType: 'json',
delay: 250,
data: function (params) {
return {
_token: CSRF_TOKEN,
search: params.term // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true
}
});
});
</script>
</body>
</html>
7. Demo
8. Conclusion
In the example, I set the limit to 5 while fetching records from the table. You can either remove it if you want to select all records or adjust it according to the requirement.
Select2 return response must have id and text keys otherwise, data would not load properly.
View this tutorial, to know selecte2 implementation in Laravel 7.
0 Response to "How to Load data using jQuery AJAX in Select2 – Laravel 8"
Post a Comment