How to Add Search & Filtering in Joomla Component

Searching and Filtering is implemented through a form that is displayed above the list of items in the backend. Site administrators can search or filter the data as per the fields defined in the form.

Step 1: Define XML Form

forms/filter_planets.xml

First, you need to define the form in xml file in the forms folder.

The file name of the form file should start with filter_ and then add the name of the model file. For example, filter_articles.xml

<?xml version="1.0" encoding="UTF-8"?>
<form>
    <fields name="filter">
        
        <field
            name="search"
            type="text"
            inputmode="search"
            label="COM_PLANETS_FILTER_SEARCH_LABEL"
            hint="JSEARCH_FILTER" />
            
        <field
            name="published"
            type="status"
            label="JOPTION_SELECT_PUBLISHED"
            class="js-select-submit-on-change"
            extension="com_stars">
                <option value="">JOPTION_SELECT_PUBLISHED</option>
        </field>

    </fields>
    
    <fields name="list">
        
        <field
            name="limit"
            type="limitbox"
            label="JGLOBAL_LIST_LIMIT"
            onchange="this.form.submit();" />
    
    </fields>
</form>

The form contains tow field groups - filter and list. 

The filter fields group contains fields for searching and filtering the data. The "search" field displays a search input for searching in title (or any other database column). The "published" field displays select box to select the published status of the records. You can add more fields in the filter fields group.

The list fields group contains the "limit" field which determines the number of rows to display per page.

Step 2: View File

src/View/Planets/HtmlView.php

Add the following code in the view file after getting the items:

// Adding Filters
$this->filterForm = $this->get('FilterForm');
$this->activeFilters = $this->get('ActiveFilters');

Above lines of code will make a call to the model file for the methods getFilterForm() and getActiveFilters(). These methods are automatically included through inheritance when you extend your model class with the ListModel.

The getFilterForm() method gets the filter form for the list layouts. You can override this method to dynamically modify the filter form. The getActiveFilters() method gets the active filters set in the form.

Step 3: Display Form - Layout File

tmpl/planets/default.php

Next, you need to display the form in the backend. Add the following code just below the opening form tag and before starting the table. You may also need to use namespace for LayoutHelper.

<?php echo LayoutHelper::render('joomla.searchtools.default', ['view' => $this]); ?>

Step 4: Modify Query for Filters - Model File

src/Model/PlanetsModel.php

When the search or filter form is submitted, the data is stored in the state variables. You need to modify the query in the method getListQuery() and add where clauses if something is entered in the search box or selected in the filter fields.

1. Search Filter

// Filter: like / search
$search = $this->getState('filter.search');
if (!empty($search))
{
    $like = $db->quote('%' . $search . '%');
    $query->where('title LIKE ' . $like);
}

2. Published Filter

// Published filter
$published = $this->getState('filter.published');
if (is_numeric($published))
{
    $query->where($db->quoteName('published') . ' = ' . $db->quote($published));
}
elseif ($published === '')
{
    $query->whereIn($db->quoteName('published'), array(0, 1));
}

Similarly, you need to modify the query for the other filters in the XML form as well.