Forum

Thread tagged as: Question, Configuration, Forum

Customised Search with Selects

Hi There

Hoping I can create a search form to filter products on a site I have.

Currently I have a simple form (as below)

<form action="#" method="POST">
<select>
    <option selected>Product Type</option>
    <option>Type 1</option>
    <option>Type 2</option>
</select>

<select>
    <option selected>Size</option>
    <option>Size 2</option>
    <option>Size 1</option>
</select>

<select>
    <option selected>Power</option>
    <option>Power 1</option>
    <option>Power 2</option>
</select>

<input type="button' id="submit" name="submit"                  
</form>

Hoping to format results using a variant of my list/detail template

What I want to know is;

  1. is it possible to use a form like i have
  2. Is it possible to exclude a section of the page(s) from search (not a deal breaker but would be useful)
  3. Any tips on how to do it - I'm a real newbie when it comes to search as I've never implemented one before.

Any tips and info would be greatly appreciated

Nik
Nik Gill

Nik Gill 1 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Are you talking about search, or about filtering a region?
Nik Gill

Nik Gill 1 points

7 years ago

I have series of products put together with list/detail

I want a form with the 3 select boxes on the homepage which certain data can be selected to bring back a list of products which apply to these search terms.

e.g if Product Type 1 is selected, Size 1 and Power 2 - the search displays only the products with matching fields
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Ok, so I think you're talking about filtering a region. Yes, you can do that quite easily. I'll see if I can knock up an example.
Nik Gill

Nik Gill 1 points

7 years ago

That would be amazing Drew!
Nik Gill

Nik Gill 1 points

7 years ago

Hi Drew

Don't mean to bug you and I know that you've got a lot on, but any chance of seeing an example?

Many thanks in advance

Nik
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

I've written up an article on this for our documentation Solutions section. I'll publish it as soon as I get to a stable net connection this afternoon.
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Actually, I can probably post it here too, to save you waiting:

It's a faily common scenario that you have a long list of items that you'd like the user to be able to search (or more accurately, filter) using a form on the page. In this example, we'll take a real estate listing.

Our region, Properties, contains a large number of houses, apartments and studios. It has fields for the number of bedrooms, the location (inner city or suburbs) and the price.

Normally, we'd display the listing like this:

perch_content_custom('Properties', array(
    'template'   => 'property_listing.html',
    'sort'       => 'price', 
    'sort-order' => 'DESC',
));

This lists all our properties, most expensive to least expensive.

Creating a filtering form

The first thing to do is create a form on the page for the user to make their selections.

Install the Forms app if you haven't already, as this gives us access to the handy perch_forms() function for displaying forms without needing a content region.

In your page:

perch_forms('property_filter.html');

Then create a new file at perch/templates/forms/property_filter.html and start building up your form.

<perch:form id="filter" method="get">
    <perch:label for="beds">Bedrooms</perch:label>
    <perch:input type="select" id="beds" options=",1,2,3,4" />
    <perch:label for="location">Location</perch:label>
    <perch:input type="select" id="location" options=",City|city, Suburbs|suburbs" />
    <div><perch:input type="submit" value="Filter" /></div>
</perch:form>

You want to add fields for each thing you want to filter by. This form uses the GET HTTP method, so when it's submitted, the chosen options will be added to the URL as a query string, something like:

?beds=3&location=city

Filtering from the URL options

Once you have the options set on the URL, you can create your filters.

// Create an empty array ready to add our filters to
$filters = array();

if (perch_get('beds')) {
    // if 'beds' is on the URL, add a filter for bedrooms
    $filters[] = array(
        'filter' => 'beds',
        'match' => 'eq',
        'value' => perch_get('beds'),
    );
}

if (perch_get('location')) {
    // if 'location' is on the URL, add a filter for the location
    $filters[] = array(
        'filter' => 'location',
        'match' => 'eq',
        'value' => perch_get('location'),
    );
}

// Unset the filters if none are used:
if (!count($filters)) $filters=false;

// Then get the list
perch_content_custom('Properties', array(
    'template'   => 'property_listing.html',
    'sort'       => 'price', 
    'sort-order' => 'DESC',
    'filter'     => $filters,
));
Nik Gill

Nik Gill 1 points

7 years ago

That's brilliant Drew, thanks so much... I'll get onto this and have a play about.

Perch Support is amazing!!!

Nik
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

It's now online here: https://solutions.grabaperch.com/architecture/user-filtered-lists
Nik Gill

Nik Gill 1 points

7 years ago

Hi Drew

Got this working fine, so thanks for that... I do have a query though

Is there any way to fine tune this a little to get better results from the filter?

What I need is to only show results ONLY when both of my two criteria are met.

my filter works on two select menus but I've noticed that I get multiple results when only one of the fields matches

i.e when Type is selected you get all the products of that type listed... but the second select doesn't then filter that list down, it leaves all the products on that were selected with the first select... so it shows all the power1 products regardless of what is selected with the voltage select.

Have I missed something?

heres my form code

<perch:form id="filter" method="get">
<div class="selectWrapper">
<perch:input type="select" id="type" options="power1, power2, power3, power4, power5 />
</div>

<div class="selectWrapper">
<perch:input type="select" id="voltage" options="10v, 20v, 40v, 50v, 80v" />
</div>

<perch:input type="submit" value="Filter" class="orange" name="search now"/>
</perch:form>

and here's my php code used in the page

<?php perch_form('filter.html'); ?>

<?php

// Create an empty array ready to add our filters to
$filters = array();

if (perch_get('type')) {
    // if 'type' is on the URL, add a filter for Type
    $filters[] = array(
        'filter' => 'type',
        'match'  => 'eq',
        'value'  => perch_get('type'),
    );
}

if (perch_get('voltage')) {
    // if 'voltage' is on the URL, add a filter for Voltage
    $filters[] = array(
        'filter' => 'voltage',
        'match'  => 'eq',
        'value'  => perch_get('voltage'),
    );
}


// Unset the filters if none are used:
if (!count($filters)) $filters=false;

// Then get the list
perch_content_custom('Products', array(
    'page'=>'/products.php',
    'template'=>'filter-listing.html',
    'sort'  => 'postDateTime', 
    'sort-order' => 'DESC',

    'filter'     => $filters,
));
?>
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

So are you saying you're getting an AND filter when you want an OR?

'filter'     => $filters,
'match'  => 'or',
Nik Gill

Nik Gill 1 points

7 years ago

Yeah, I think so... I'm not 100% sure though if I'm honest
Nik Gill

Nik Gill 1 points

7 years ago

I've set up two products... both with the same first filter but with differing second filters as a test and both products are showing in the list regardless of what is entered into the second filter.
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Try it as an AND filter then.
Nik Gill

Nik Gill 1 points

7 years ago

Hmmm, now I get no results at all.

// Then get the list
perch_content_custom('Products', array(
    'page'=>'/products.php',
    'template'=>'filter-listing.html',
    'sort'  => 'postDateTime', 
    'sort-order' => 'DESC',
    'filter'     => $filters, 
    'match' => 'and'
));

tried capitals and lower case... am I putting it in the right place? or should it be in the perch_get array?
Nik Gill

Nik Gill 1 points

7 years ago

Got it currently as

// Then get the list
perch_content_custom('Products', array(
    'page'=>'/products.php',
    'template'=>'filter-listing.html',
    'sort'  => 'postDateTime', 
    'sort-order' => 'DESC',
    'filter'     => $filters, 
    'match' => 'or'
));
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

What does print_r($filters); output?
Nik Gill

Nik Gill 1 points

7 years ago

Where do i put that drew?
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

In your page, after the filters have been configured.
Nik Gill

Nik Gill 1 points

7 years ago

Ok, am getting this

Array ( [0] => Array ( [filter] => type [match] => eq [value] => type1 ) [1] => Array ( [filter] => voltage [match] => eq [value] => voltage1 ) )