Global search

Global search allows for searching through all searchable resources in your application.

Getting started

By default, Skeleton ships with a global search input in MainHeader.vue. If you're coming from an older version, add the following to the toolbar (next to the logo):

<global-search
    class="q-ml-md"
    :style="$q.screen.gt.md ? 'width: 300px' : undefined"
    v-if="$q.screen.gt.xs"
/>

By default, resources are not globally searchable. You can make a resource searchable by setting the following property on the resource:

public bool $globalSearchEnabled = true;

Now when you type into the search input, a search will be performed.

danger

If you have no filterable fields in your resource, an exception will be thrown

Customizing the search query

By default a search is conducted on all Text fields that are filterable and shown on the index page.

You can override this behaviour by adding the following method on your resource, for example:

public function globalSearch(string $query): ?Builder
{
    return $this->indexQuery()->where('first_name', 'LIKE', "%$query%")
        ->orWhere('last_name', 'LIKE', "%$query%")
        ->orWhere('serial_number', 'LIKE', "%$query%")
        ->orWhereHas('notes', function($q) use ($query) {
            return $q->where('message', 'LIKE', "%$query%");
        })
}

Customizing the search results

By default, Qore exposes a Vue component for each search result that supports a title, a subtitle and a side. The title will be the resource modelTitle by default.

You can add the following method to override a search result:

public function globalSearchResult(Model $model): array
{
    return [
        'title' => $this->modelTitle($model),
        'side' => $model->gender->description,
        'subtitle' => "Email address: {$model->email}\n And some other text"
    ];
}

Defining a custom search result component

You can also define a search result component yourself. For example, start by creating a MyGlobalSearchResult.vue:

frontend/src/path/to/MyGlobalSearchResult.vue

<template>
    <fragment>
        <q-item-section avatar>
            <q-avatar>
                <img src="https://cdn.quasar.dev/img/avatar2.jpg">
            </q-avatar>
        </q-item-section>

        <q-item-section>
            <q-item-label lines="1">
                <text-highlight
                    :queries="[query]">{{result.data.title}}
                </text-highlight>
            </q-item-label>
            <q-item-label
                caption
                lines="2"
            >
                <text-highlight
                    :queries="[query]">
                    Lorem ipsum dolar et
                </text-highlight>

            </q-item-label>

        </q-item-section>

        <q-item-section
            side
            top
        >
            <q-badge color="grey-9">
                <text-highlight
                    :queries="[query]"> {{result.data.side}}
                </text-highlight>
            </q-badge>

            <q-item-label caption>{{result.data.created_at}}</q-item-label>
        </q-item-section>
    </fragment>
</template>

<script>
    export default {
        props: ['query', 'result']
    }
</script>

The data you have available in the result.data prop is defined in your globalSearchResult method.

Then register this search result globally (for example in your app.js):

import MyGlobalSearchResult from 'src/path/to/MyGlobalSearchResult'

Vue.component('MyGlobalSearchResult', MyGlobalSearchResult)

info

The surrounding component for a search result is a Quasar item.

See https://quasar.dev/vue-components/list-and-list-items for more information.

Now you can point to this component in your resource:

public function globalSearchResultComponent()
{
    return 'MyGlobalSearchResult';
}

Sort order

By default, the sort order of search results are identical to the order of which Resource is registered (first to last). In some cases this might not be ideal, you can define a custom sort order (default is 100). Lower numbers will be prioritized more:

/**
 * Lower numbers will be higher in the list (low = more priority)
 *
 * @return int
 */
public function globalSearchSortOrder(): int
{
    return 25;
}

Additional configuration

You can define how many search results will be shown per resource. The default is 8.

 public function globalSearchResultLimit(): int
 {
     return 15;
 }