Filtering pages based on checkbox values using AJAX and the search feature

Kirby 3 Questions 🤔
1

I am creating a simple real-estate website where each property has its own page and there is a page ‘properties’ that contains all the property pages as sub-pages. On the home page, I have a simple search functionality which would probably work more like a ‘filter and display’ functionality. In this, there are multiple checkboxes to filter by property page fields like location, type and budget. Basically, depending on the checkboxes that are checked, I want to filter all the properties and display them on the same page, i.e. home page. From the information I’ve gathered, the feature would behave something like this –

  1. Add the values of all the checked checkboxes in an array. Each field would have its own array.
  2. On hitting the search button, use JavaScript to make an AJAX request to the PHP controller code that has the filterBy() method to filter through all the property pages by passing in the above arrays as arguments and returns the results.
  3. Display the filtered results.

This is the code for the checkboxes –

<input class="location-checkbox" type="checkbox" value="Baga">
<input class="location-checkbox" type="checkbox" value="Calangute">
<input class="location-checkbox" type="checkbox" value="Candolim">

<input class="type-checkbox" type="checkbox" value="Apartments">
<input class="type-checkbox" type="checkbox" value="Villas">
<input class="type-checkbox" type="checkbox" value="Mansions">

<input class="budget-checkbox" type="checkbox" value="Less than 1 crore">
<input class="budget-checkbox" type="checkbox" value="1 to 5 crores">
<input class="budget-checkbox" type="checkbox" value="More than 5 crores">

I have a div called #search-results which is a modal to display the results on the same page.

The property page field names are location, type and budget and their type is select.

Where do I begin? Do I create the arrays using PHP or JavaScript? What would the controller code be?

I’m new to Kirby. So, please excuse any incorrect use of technical terminology and please let me know if you need any other information. Thank you in advance :slight_smile:

2

First of all, set up a proper form with name attributes for your input fields (and labels for accessibility).

Then create a JSON representation for the properties page (controller and template):

In your JS, listen for form submission (and prevent default form handling). No need to manually build a data array, form submission does this for you.

Send the data to the JSON representation via AJAX.

The Load more with Ajax recipe might be helpful in this context, different use case, but the general procedure is the same.