# Panel search

****

<a href="https://getkirby.com/docs/reference/plugins/extensions/panel-areas">Panel areas</a> also allow you to add your own search type to the Panel - next to pages, files and users - or even to overwrite these existing search implementations.

```php "Site area"
return [
    'label' => 'Site',
    ...
    'dialogs' => ...
    'views' => ...
    // set the default search type
    'search' => 'pages',
    // define new search endpoints
    'searches' => [
        'pages' => [
					'label'  => 'Pages',
					'icon'   => 'page',
					'query'  => function (string|null $query, int $limit, int $page) {
            $pages = site()->search($query)->paginate($limit, $page);

            return [
							'results' => $pages->values(fn ($page) => [
								'image' => $page->panel()->image(),
								'text' => Escape::html($page->title()->value()),
								'link' => $page->panel()->url(true),
								'info' => Escape::html($page->id()),
								'uuid' => $page->uuid()?->toString(),
							]),
							'pagination' => $pages->pagination()->toArray()
						];
        }
    ]
];
```

In Vue, the search can then be executed like this:

```js
const results = await this.$search('pages');
```

## Search results

A Panel search extension returns results as a simple array with parameters for each item:

| Parameter | Type | Description |
| - | - | - |
| `image` | `array` | Optional image settings |
| `icon` | `string` | The name of the option icon |
| `info` | `string` | Optional info text on the right |
| `link` | `string` | The url/path which will be visited on click |
| `text` | `string` | The label for the search result |
| `uuid` | `string` | The UUID of the search result |

## Custom search type

That's all it takes to create your own search index for your own plugins:

```php
Kirby::plugin('your-plugin/todos', [
    'areas' => [
        'todos' => [
            ...
            'searches' => [
                'todos' => [
                    'label' => 'Todos',
                    'icon'  => 'check',
                    'query' => function (string|null $query, int $limit, int $page) {
                        // search for $todos here.
                        $results = [];

                        foreach ($todos as $todo) {
                            $results[] = [
                                'image' => [ // optional image settings ],
                                'text'  => $todo->text(),
                                'link'  => '/todos/' . $todo->id(),
                                'info'  => 'Get it done!'
                            ];
                        }

                        return $results;
                    }
                ]
            ]
        ]
    ]
]);
```

The search will automatically appear in the search dialog, but can also be run manually from your Vue components with …

```js
const query = 'Searchy search';
const todos = await this.$search('todos', query);
```

## Extending default search types

You don't like the way the pages search works? Maybe you already have your data in Elastic search or Algolia and you want to use a real search server instead? No problem. It's now super easy to extend and overwrite our core searches.

```php
<?php

Kirby::plugin('example/search', [
  'areas' => [
    // extending a core search
    'site' => function ($kirby) {
      return [
        'searches' => [
          'pages' => [
            'query' => function (string|null $query, int $limit, int $page) {
              // run your own search here ...

              // example result
              return [
                [
                  'image' => [
                    'src'   => 'https://source.unsplash.com/random',
                    'cover' => true,
                    'back'  => 'white'
                  ],
                  'text'  => 'Test Result',
                  'link'  => '/site',
                  'info'  => 'test info'
                ]
              ];
            }
          ]
        ]
      ];
    },
  ]
]);
```

### Reusing core code

When you plan to extend a search, you might want to fall back to Kirby's core behaviour in some cases. This can be done by loading the core code:

```php
<?php

Kirby::plugin('example/search', [
  'areas' => [
    // extending a core search
    'site' => function ($kirby) {
      return [
        'searches' => [
          'pages' => [
            'query' => function (string|null $query, int $limit, int $page) use ($kirby) {

              if ($kirby->user()->isAdmin()) {
                // return super secret search results for the admin
              }

              return $kirby->core()->area('site')['searches']['pages']['query']($query, $limit, $page);
            }
          ]
        ]
      ];
    },
  ]
]);
```

## Core searches

Area | Search name
- | -
`site` | `pages`
`site` | `files`
`users` | `users`