N
I'd do that.Took this component:
https://select2.org (For example of integration in vuejs) https://ru.vuejs.org/v2/examples/select2.html )The Bakend needs an answer in this format:{
"data": [
{
"id": 1,
"title": "Россия",
},
{
"id": 2,
"title": "Израиль",
},
]
}
This component allows data to be downloaded with Ajax.For example, the first rolling list with countries would look like this: $("#countryList").select2({
placeholder: "Выберите...",
ajax: {
url: "{{ route('country.index') }}",
type: "get",
dataType: 'json',
delay: 250,
data: function (params) {
return {
title: params.term
};
},
processResults: function (response) {
let res = response.data.map(function (item) {
return {id: item.id, text: item.title};
});
return {
results: res
};
},
cache: false
}
});
The second list with regions will, for example, be: {
"data": [
{
"id": 6,
"title": "Краснодарский край"
},
{
"id": 7,
"title": "Ростовская область"
},
{
"id": 8,
"title": "Москва"
},
]
}
$("#regionList").select2({
placeholder: "Выберите...",
ajax: {
url: "{{ route('regions.index') }}",
type: "get",
dataType: 'json',
delay: 250,
data: function (params) {
let country = $('#countryList option:selected').val();
return {
title: params.term,
region: country,
};
},
processResults: function (response) {
let res = response.data.map(function (item) {
return {id: item.id, text: item.title};
});
return {
results: res
};
},
cache: false
}
});
Note that on the list with the regions we are requesting a region with additional parameters country♪Controllers will look like this:class CoutryController extends Controller
{
public function index(Request $request)
{
$title = $request->input('title');
$countries = Coutry::when($title, function ($query) use ($title){
return $query->where('title', 'LIKE', "%$title%");
})
->get();
return CoutrySelect2Resource::collection($countries);
}
}
class RegionController extends Controller
{
public function index(Request $request)
{
$title = $request->input('title');
$coutry = $request->input('coutry');
$regions = Region::when($title, function ($query) use ($title){
return $query->where('title', 'LIKE', "%$title%");
})
->when($coutry, function ($query) use ($coutry){
$query->whereHas('countries', function ($query) use ($coutry){
return $query->where('countries.id', $coutry);
});
}
->get();
return RegionSelect2Resource::collection($regions);
}
}
It's a very and very vague decision. To obtain a working decision, you will need to understand how to check the data from Request: https://laravel.com/docs/6.x/validation#form-request-validation How Laravel works with CSRF https://laravel.com/docs/6.x/csrf#csrf-x-csrf-token How API Resources work: https://laravel.com/docs/6.x/eloquent-resources How to remove the logic of filtering from the counteraller: https://appdividend.com/2018/05/03/how-to-create-filters-in-laravel/ https://www.youtube.com/channel/UC3n8EP0_kK3ufmXjbpGdmIA/videos Don't use JQuery.
