83 lines
3.2 KiB
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> |