import MiniSearch from 'minisearch';
-export default (searchData = []) => ({
+export default () => ({
miniSearch: {}, // Holds the MiniSearch instance
setup: { // MiniSearch options: https://lucaong.github.io/minisearch/#search-options
- fields: ['title', 'text','keywords'], // fields to index for full-text search
+ fields: ['title', 'text', 'keywords'], // fields to index for full-text search
storeFields: ['id', 'title', 'text', 'type', 'url', 'thumb'], // fields to return with search results
searchOptions: {
prefix: true, // Allow partial matches
query: '', // The search query
async init() {
-
this.miniSearch = new MiniSearch(this.setup);
- await loadScript('search.index.js');
+ await loadScript('../js/search.index.js');
this.miniSearch.addAllAsync(minisearchodl);
},
{{-- SEARCH (full screen overlay) --}}
-@push('before_scripts')
- <script>
- @php
- // TODO: Consider fetching this via JS only when search is used
-
- // TODO: need to change Cubist/minisearch to output data differently but until then, can test it by copying the output manually into a .json file. Then use await / fetch to get data only when needed?
- echo file_get_contents(storage_path('search.js'));
- //echo 'var documents = [];';
- @endphp
- </script>
-@endpush
-
<div class="overlay search-overlay
bg-white text-black
z-20"
- {{-- Pass search index [documents] to component for setup --}}
{{-- See js/search.js --}}
- x-data="search(documents)"
+ x-data="search()"
x-show="searchOpen"
x-transition:enter.opacity.duration.500ms
x-transition:leave.opacity.duration.200ms