如何正确拥有包含多个过滤器的搜索页面？

Question

我有点怀疑如何创建一个像下面的搜索页面，用户可以使用多个过滤器（类别，城市，价格，日期）和分页进行会议。所以我有一个search.blade.php这样的页面：

现在我创建了一个SearchController，它将会议，城市和类别返回到视图search.blade.php：

class SearchController extends Controller
{
    public function index(){
        $pageLimit = 1;
        return view('search')
            ->with('categories', Category::orderBy('created_at', 'desc')->get())
            ->with('cities', Congress::orderBy('created_at','desc')->pluck("city")->unique())
            ->with('congresses', Congress::orderBy('created_at','desc')->paginate($pageLimit));
    }
}

所以在search.blade.php中有这个选择菜单：

<div class="row">
    <div class="col-6 col-md-3 mb-4 mb-md-0">
        <form>
            <select class="custom-select form-control">
                <option selected="">All categories </option>
                @foreach ($categories as $category)
                    <option {value="{{ $category->id }}">
                        {{ $category->name }}
                    </option>
                @endforeach
            </select>
        </form>
    </div>

    <div class="col-6 col-md-3 mb-4 mb-md-0">
        <form>
            <select class="custom-select form-control">
                <option selected="">All cities</option>
                @foreach($cities as $city)
                    <option>
                        {{ $city }}
                    </option>
                @endforeach
            </select>
        </form>
    </div>

    <div class="col-6 col-md-3">
        <form>
            <select class="custom-select form-contro">
                <option selected="">Price</option>
                <option>Paid</option>
                <option>Free</option>
            </select>
        </form>
    </div>

    <div class="col-6 col-md-3">
        <form>
            <select class="custom-select form-control">
                <option selected="">This week</option>
                <option>This month</option>
            </select>
        </form>
    </div>
</div>

而在search.blade.php中，默认情况下也会出现最后8个插入的会议：

<div class="row">
    @foreach($congresses as $congress)
        <div class="col-12 col-sm-6 col-lg-4 col-xl-3 my-4">
            <div class="card">
                <img class="card-img-top" src="{{$congress->image}}" alt="Card image cap">
                <div class="card-body">
                    <p class="font-size-sm">{{$congress->start_date}}</p>
                    <h5 class="card-title">{{$congress->name}}</h5>
                </div>
            </div>
        </div>
    @endforeach
</div>
<div class="text-center d-flex justify-content-center mt-3">
    {{$congresses->links("pagination::bootstrap-4")}}
</div>

你知道怎么做才能正确地实现这个环境吗？

Answer 1

试试这个..

search.blade.php

<div class="row">
    <form action="{{ route('your.index') }}" method="get">
        <div class="col-6 col-md-3 mb-4 mb-md-0">
            <select class="custom-select form-control" name="category_id">
                <option selected="" value="">All categories </option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}" {{ (!empty($categoryId) && $categoryId == $category->id) ? 'selected' : '' }}>
                        {{ $category->name }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="col-6 col-md-3 mb-4 mb-md-0">
            <select class="custom-select form-control" name="city">
                <option selected="" value="">All cities</option>
                @foreach($cities as $city)
                    <option value="{{ $city }}" {{ (!empty($selectedCity) && $selectedCity == $city) ? 'selected' : '' }}>
                        {{ $city }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="col-6 col-md-3">
            <select class="custom-select form-contro" name="price">
                <option {{ empty($price) ? 'selected' : '' }} value="">Price</option>
                <option value="paid" {{ (!empty($price) && $price == 'paid') ? 'selected' : '' }}>Paid</option>
                <option value="free" {{ (!empty($price) && $price == 'free') ? 'selected' : '' }}>Free</option>
            </select>
        </div>

        <div class="col-6 col-md-3">
            <select class="custom-select form-control" name="range">
                <option value="week" {{ (!empty($range) && $range == 'week') ? 'selected' : '' }}>This week</option>
                <option  value="month" {{ (!empty($range) && $range == 'month') ? 'selected' : '' }}>This month</option>
            </select>
        </div>

搜索

调节器

class SearchController extends Controller
{
    public function index(Request $request){
        $categoryId = $request->get('category_id');
        $city       = $request->get('city');
        $price      = $request->get('price');
        $range      = $request->get('range');
        $pageLimit  = 1;

        $congress = Congress::Query();

        if(!empty($categoryId)) {
            //$congress = $congress->where('category_id', $categoryId)
            $congress = $congress->whereHas('categories', function($qry) use($categoryId) {
                $qry->where('category_id', categoryId);
            });
        }

        if(!empty($city)) {
            $congress = $congress->where('city', $city)
        }

        if(!empty($price)) {
            if($price == "free") { 
                $congress = $congress->whereHas('ticketTypes', function($qry) { 
                    $qry->where('price', '=', 0); 
                }); 
            } elseif($price == "paid") { 
                $congress = $congress->whereHas('ticketTypes', function($qry) { 
                    $qry->where('price', '>', 0); 
               }); 
           } 
        }

        if(!empty($range)) {
            if($range == "week") {
                 $congress = $congress->where('start_date', '<', Carbon::now()->addDays(7));
            } elseif($range == "month") {
                 $congress = $congress->where('start_date', '<', <arbon::now()->addDays(30));
            }
        }

        $congress = $congress->orderBy('created_at','desc')->paginate($pageLimit);

        return view('search', [
            'categories'     => Category::orderBy('created_at', 'desc')->get(),
            'cities'         => Congress::orderBy('created_at','desc')->pluck("city")->unique(),
            'congresses'     => $congress,
            'categoryId'     => $categoryId,
            'selectedCity'   => $city,
            'price'          => $price,
            'range'          => $range,
        ];
    }
}

您可以根据实际需求和实际变量对其进行自定义。

要使用过滤器选项对结果进行分页，请使用以下分页链接：

<div class="text-center d-flex justify-content-center mt-3">
    {{$congresses->appends(Request::all())->links("pagination::bootstrap-4")}}
</div>

希望它有所帮助..让我知道结果..

Answer 2

使用querybuilder并连接要在搜索中关联的每个属性。