This example showcases two additional filter views that come with Livewire Filters and use AlpineJS to provide a combobox, allowing users to search and filter options. This is especially useful when implementing horizontal filters, as shown here, and when dealing with a large number of options.
In this example, we are using:
The advanced view of the LfCheckboxFilter for the Car Brand and Special Category filters, with the searchable option enabled
The same advanced view of the LfSelectFilter for the Transmission and Fuel Type filters
A Sort component that allows users to reorder the entries
- No results found
- No results found
Audi A3 Cabrio
Seats:
4
Doors:
2
Transmission:
Manual
Fuel:
Unleaded
Model year:
2020
Audi Q3 Turbo Diesel
Seats:
5
Doors:
5
Transmission:
Manual
Fuel:
Diesel
Model year:
2022
Citroen C4 Grand Picasso Automatic
Seats:
7
Doors:
5
Transmission:
Automatic
Fuel:
Diesel
Model year:
2022
Citroen SpaceTourer Automatic
Seats:
7
Doors:
5
Transmission:
Automatic
Fuel:
Diesel
Model year:
2021
Fiat 500 Cabrio Automatic
Seats:
2
Doors:
2
Transmission:
Automatic
Fuel:
Unleaded
Model year:
2021
Fiat Panda
Seats:
4
Doors:
4
Transmission:
Manual
Fuel:
Unleaded
Model year:
2023
Hyundai i10
Seats:
4
Doors:
4
Transmission:
Manual
Fuel:
Diesel
Model year:
2023
Hyundai i10 Automatic
Seats:
4
Doors:
4
Transmission:
Automatic
Fuel:
Unleaded
Model year:
2021
Hyundai i20
Seats:
5
Doors:
4
Transmission:
Manual
Fuel:
Unleaded
Model year:
2021
Hyundai i30
Seats:
5
Doors:
5
Transmission:
Manual
Fuel:
Diesel
Model year:
2025
Jeep Hummer H3
Seats:
5
Doors:
4
Transmission:
Automatic
Fuel:
Diesel
Model year:
2020
Kia Picanto
Seats:
4
Doors:
4
Transmission:
Manual
Fuel:
Unleaded
Model year:
2023
Example's code
1<div class="my-8 xl:my-12" id="livewire-collection">
2 <div class="grid grid-cols-12 gap-8 lg:gap-12 xl:gap-16 mb-4 xl:mb-8">
3 <div class="col-span-10">
4 <div class="grid grid-cols-4 items-center gap-3 lg:gap-5">
5 <div>
6 {{ livewire:lf-checkbox-filter
7 blueprint="cars.car"
8 field="car_brand"
9 condition="taxonomy"
10 view="lf-checkbox-advanced"
11 searchable="true"
12 placeholder="Car brand"
13 }}
14 </div>
15 <div>
16 {{ livewire:lf-checkbox-filter
17 blueprint="cars.car"
18 field="special_categories"
19 condition="query_scope"
20 modifier="multiselect"
21 view="lf-checkbox-advanced"
22 searchable="true"
23 placeholder="Special categories"
24 }}
25 </div>
26 <div>
27 {{ livewire:lf-select-filter
28 blueprint="cars.car"
29 field="transmission"
30 condition="is"
31 view="lf-select-advanced"
32 placeholder="Transmission"
33 }}
34 </div>
35 <div>
36 {{ livewire:lf-select-filter
37 blueprint="cars.car"
38 field="fuel_type"
39 condition="is"
40 view="lf-select-advanced"
41 placeholder="Fuel type"
42 }}
43 </div>
44 </div>
45 </div>
46 <div class="col-span-2">
47 {{ livewire:lf-sort
48 blueprint="cars.car"
49 fields="seats|doors"
50 }}
51 </div>
52 </div>
53 <div>
54 {{ livewire-collection:cars paginate="12" scrollTo="#livewire-collection" }}
55 </div>
56</div>