fleetCatalogue/resources/views/components/searchbar-select2.blade.php

83 lines
3.2 KiB
PHP

@props(['post' => '', 'inputClasses' => '', 'autocomplete' => '', 'placeholder' => '', 'templateResult' => 'false', 'templateSelection' => 'false', 'text' => 'item.name', 'id' => 'item.name'])
<form class="mx-auto"
@if (!empty($post))
action="{{ $post }}"
@else
@endif>
<div id="searchContainer" class="flex max-w-min md:min-w-[25rem] mx-auto">
<noscript class="flex">
<input id="search" name="search"
class="input input-bordered bg-zinc-800 border-{{ env('ACCENT_COLOR') }} focus:bg-zinc-700 placeholder-gray-400 rounded-l-lg rounded-r-none w-[23rem]" placeholder="{{ $placeholder }}"/>
<button type="submit" id="select2-btn"
class="btn btn-square bg-zinc-800 border-{{ env('ACCENT_COLOR') }} hover:bg-zinc-700 rounded-l-none rounded-r-lg">
<i class="fa-solid fa-magnifying-glass fa-lg text-{{ env('ACCENT_COLOR') }}"></i>
</button>
</noscript>
</div>
<div class="flex flex-wrap mt-2 gap-3 mx-auto sm:max-w-[27.5rem] lg:max-w-[55rem] justify-center">
{{ $slot ?? '' }}
</div>
</form>
<script type="text/javascript">
function formatResult(item) {
if (!{{ $templateResult }} || !item.id) {
return item.text;
}
const selectionText = item.text.split("|");
if (item.text === selectionText[0]) {
return item.text;
}
return $('<span>' + selectionText[0] + '</br>' + selectionText[1] + '</span>');
};
function formatSelection(item) {
if (!{{ $templateSelection }} || !item.id) {
return item.text;
}
const selectionText = item.text.split("|");
if (item.text === selectionText[0]) {
return item.text;
}
return $('<span>' + selectionText[0] + '</span>');
}
window.addEventListener('load', () => {
document.getElementById('searchContainer').innerHTML = '<button type="button" x-on:click="$(\'#search\').val(\'\').change();" class="btn btn-square bg-zinc-800 border-{{ env('ACCENT_COLOR') }} hover:bg-zinc-700 rounded-l-lg rounded-r-none">'
+ '<i class="fa-solid fa-x fa-xs text-{{ env('ACCENT_COLOR') }}"></i></button>'
+ '<select id="search" name="search" class="bg-zinc-800 border-{{ env('ACCENT_COLOR') }} focus:bg-zinc-700 placeholder-gray-400 rounded-none w-[21rem]"></select>'
+ '<button type="submit" id="select2-btn" class="btn btn-square bg-zinc-800 border-{{ env('ACCENT_COLOR') }} hover:bg-zinc-700 rounded-l-none rounded-r-lg">'
+ '<i class="fa-solid fa-magnifying-glass fa-lg text-{{ env('ACCENT_COLOR') }}"></i></button>';
$('#search').on('select2:select', function (e) {
document.getElementById('select2-btn').focus();
});
@if(app('request')->input('search'))
const option = new Option('{{ app('request')->input('search') }}', '{{ app('request')->input('search') }}', true, true);
$('#search').append(option).trigger('change');
@endif
$('#search').select2({
tags: [],
placeholder: '{{ $placeholder }}',
templateResult: formatResult,
templateSelection: formatSelection,
ajax: {
url: '{{ $autocomplete }}',
dataType: 'json',
delay: 250,
processResults: function (data) {
console.log(data);
return {
results: $.map(data, function (item) {
return {
text: {!! $text !!},
id: {{ $id }}
}
})
};
},
cache: true
}
});
});
</script>