1. in web.php file
<?php
use App\Http\Controllers\BackendController;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Route::get('/backend', [BackendController::class,'index'])->name('backend.index');
2. in BackendController.php file
<?php
namespace App\Http\Controllers;
use App\Models\User;
class BackendController extends Controller
{
public function index()
{
$search = \request('term');
$query = User::query();
if ($search) {
$query->where('name', 'like', '%' . $search . '%');
}
$users = $query->paginate(10);
return response()->json($users);
}
}
3. in welcome.blade.php file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select2 with Laravel and AJAX</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"
integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
span.select2-selection__arrow {
display: none;
}
.envelope {
background-color: #fff;
height: 240px;
width: 300px;
z-index: 99999 !important;
position: absolute;
top: 40px;
border-top: 1px solid #5897fb;
}
.my-d-none{
display: none;
}
</style>
</head>
<body>
<form action="" method="GET" onsubmit="return false">
<div id="select-container">
<div class="envelope"></div>
<select id="mySelect" name="mySelect" style="width: 300px;">
<option value="">İstifadəçi axtarın...</option>
</select>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"
integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/az.min.js"
integrity="sha512-5h/4MstAOhpL8LHF6e7tTEv31xdr5wY7JL9w7nqOI2zs/tL1ofuRfX+g+RwJ7l/3xc5cIAeLMLne6m+QYX67hg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function() {
$('#mySelect').select2({
language: "az",
ajax: {
url: '{!! route('backend.index') !!}',
dataType: 'json',
delay: 250,
headers: {
'X-CSRF-Token': $('meta[name="_token"]').attr('content'),
},
processResults: function(data) {
return {
results: data.data,
pagination: {
more: data.next_page_url !== null
}
};
},
cache: true
},
minimumInputLength: 0,
placeholder: 'İstifadəçi axtarın...',
escapeMarkup: function(markup) {
return markup;
},
templateResult: function(data) {
return data.name;
},
templateSelection: function(data) {
return data.name ?? 'İstifadəçi axtarın...';
},
theme: "classic",
}).on("select2:closing", function(e) {
e.preventDefault();
}).select2('open');
});
$(document).on('click', 'span.select2.select2-container.select2-container--classic.select2-container--below.select2-container--open', function () {
let checkOpening = $('.envelope').attr('class');
if(checkOpening == 'envelope')
{
$('.envelope').addClass('my-d-none');
}
else
{
$('.envelope').removeClass('my-d-none');
}
});
</script>
</body>
</html>
Digər dildə:
EN