In this article, we will see a select2 autocomplete search using Ajax in laravel 10. Here, we will learn about laravel 10 select2 autocomplete search using Ajax. You can search records from the database without page refresh or without form submission.
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. To use Select2, you must include the compiled JavaScript and CSS files on your website.
Using Select2 from a CDN:
A CDN (content delivery network) is the fastest way to get up and running with Select2. Select2 is hosted on both the jsDelivr and cdnjs CDNs. Simply include the following lines of code in the <head> section of your page.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
In this step, we'll install laravel 10 using the following command.
composer create-project laravel/laravel laravel_10_select2_search_example
Then, we'll run the default migration using the following command.
php artisan migrate
After that, we will create dummy records using the tinker.
php artisan tinker
User::factory()->count(50)->create();
Now, we will create a UserController using the following command.
php artisan make:controller UserController
app/Http/Controllers/UserController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(): View
{
return view('index');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function autoCompleteSearch(Request $request): JsonResponse
{
$data = [];
if($request->filled('q')){
$data = User::select("name", "id")
->where('name', 'LIKE', '%'. $request->get('q'). '%')
->get();
}
return response()->json($data);
}
}
Next, we'll define routes to the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
/*
|--------------------------------------------------------------------------
| 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::controller(UserController::class)->group(function(){
Route::get('index', 'index');
Route::get('auto-complete-search', 'autoCompleteSearch')->name('autocompletesearch');
});
Now, we will create an index.blade.php file. So, add the following HTML to that file.
resources/views/index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Select2 Autocomplete Search Using Ajax in Laravel 10 - Vidvatek</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
<div class="container">
<h4 class="mt-5 mb-4">Select2 Autocomplete Search Using Ajax in Laravel 10 - Vidvatek</h4>
<select class="form-control" id="search" style="width:780px;" name="user_id"></select>
</div>
<script type="text/javascript">
var path = "{{ route('autocompletesearch') }}";
$('#search').select2({
placeholder: 'Search Records',
ajax: {
url: path,
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.name,
id: item.id
}
})
};
},
cache: true
}
});
</script>
</body>
</html>
You might also like:
- Read Also: How to Create Autocomplete Search in Vue JS
- Read Also: How to Create Autocomplete Search in React
- Read Also: Laravel 10 REST API CRUD Operation
- Read Also: Importing Excel File into Database Using Python