Laravelでサイト内に検索フォームを無料で簡単に設置する方法

Spatie Searchableパッケージで、Laravelで簡単に検索フォームを設置する方法を解説します。

Googleの検索ボックスは会員制サイトはムリ。
ScoutとAlgoriaを使う方法もありますが、Algoriaは一定以上利用すると有料になります。

「回数制限付きだと落ち着かない」
「条件なしで無料で使いたい！」

という場合には、今回ご紹介するパッケージがおすすめ。

Laravelでサイト内全文検索フォームを無料で簡単に設置する方法

Laravelでサイト内全文検索フォームを無料で簡単に設置する方法

今回は、textsテーブルのbodyカラムを検索するフォームを作っていきます。

データベース内のテーブルは、このような構造になっています。

今回はこの中の bodyカラムの中身を検索。

検索結果は titleカラムを表示するようにします。

仕上がりイメージはこちら。

①パッケージインストール

まずはパッケージをインストールしましょう。

composer require spatie/laravel-searchable

1	composer require spatie/laravel-searchable

GitHub - spatie/laravel-searchable: Pragmatically search through models and other sources

Pragmatically search through models and other sources - spatie/laravel-searchable

②モデルファイルを編集

次に検索対象のモデルファイルを開きます。

一番上にuse宣言を入れ、さらにimplements Searchableと加えます。

さらに getSearchResultメソッドを追加。

<?php

namespace App\Models;


use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Spatie\Searchable\Searchable;
use Spatie\Searchable\SearchResult;

class Text extends Model implements Searchable
{
    use HasFactory;

    protected $guarded = [];

    public function getSearchResult(): SearchResult
    {
        // A.検索結果のリンク先となるルートを入れる
       $url = route('text.show', $this->id);
    
        return new SearchResult(
           $this,
        //    B.検索結果で表示したいカラムを入れる
           $this->title,
           $url
        );
    }

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

use Spatie\Searchable\Searchable;

use Spatie\Searchable\SearchResult;

class Text extends Model implements Searchable

{

use HasFactory;

protected $guarded = [];

public function getSearchResult(): SearchResult

{

// A.検索結果のリンク先となるルートを入れる

$url = route('text.show', $this->id);

return new SearchResult(

$this,

// B.検索結果で表示したいカラムを入れる

$this->title,

$url

);

}

メソッド内のAとBの部分は、状況に応じて変更してください。

Aは検索結果のリンク先となります。

通常は (モデル名.show) のルート設定を入れておきます。

Bは検索結果で表示したいカラムを入れます。

③ ルート設定を作成

次に、ルート設定を作成しておきます。

    // search routes
    Route::get('/search', 'SearchController@index')->name('search.index');
    Route::get('/search/result', 'SearchController@result')->name('search.result');

// search routes

Route::get('/search', 'SearchController@index')->name('search.index');

Route::get('/search/result', 'SearchController@result')->name('search.result');

④ コントローラーを作成

次に、コントローラーを作成します。

php artisan make:controller SearchController

1	php artisan make:controller SearchController

コントローラーの最初に、searchableと、検索に使うモデルのためのuse宣言を入れます。

<?php

namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

use Spatie\Searchable\Search;
use App\Models\Text;

class SearchController extends Controller
{
    public function index()
    {
        return view('home');
    }
    public function result( Request $request)
    {
        $searchResults = (new Search())
                    // C 検索するモデル名と、カラムを指定
                    ->registerModel(Text::class, 'body')
                    ->perform($request->input('query'));
 
        return view('search.result', compact('searchResults'));
    }
}

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

use Illuminate\Http\Request;

use Spatie\Searchable\Search;

use App\Models\Text;

class SearchController extends Controller

{

public function index()

{

return view('home');

}

public function result( Request $request)

{

$searchResults = (new Search())

// C 検索するモデル名と、カラムを指定

->registerModel(Text::class, 'body')

->perform($request->input('query'));

return view('search.result', compact('searchResults'));

}

C には検索するモデル名と、カラムを入れます。

これで下準備完了。

⑤ 検索ボックスを作成

次にビュー部分を作っていきます。

最初に検索ボックスですが、action に先ほど作成した search.result を設定する以外は、通常どおり。

デザインはお好きなものにしてください。

      <form action="{{ route('search.result') }}" method="GET">
        @csrf
        <input type="text" name="query">
        <input type="submit">
      </form>

@csrf

</form>

⑥ 検索結果表示画面を作成

次にroutes/views の中にsearchフォルダを作り、その中にresult.blade.phpファイルを作成します。

"{{ request('query') }}"について{{ $searchResults->count() }} 件の検索結果がありました。
<div class="card-body">
    @foreach($searchResults->groupByType() as $type => $modelSearchResults)
        @foreach($modelSearchResults as $searchResult)
            <ul>
                <li><a href="{{ $searchResult->url }}">{{ $searchResult->title }}</a></li>
            </ul>
        @endforeach
    @endforeach
</div>