Views – Dependent values for parametric search – a first look

Parametric search in Views allows your site visitors to search through posts by specifying a number of different parameters.So say you are on a holiday home portal, looking for a rental house by the beach, you’ll probably be presented with a search form that lets you choose the number of rooms; the location; whether there is a pool or not and a price range.  Hit the Search button and you’ll be presented with a set of results that matches your criteria.

We are all familiar with this pattern, and it’s something that Views does well straight out of the box.

The latest release of Views (1.6) has added the ability to ‘filter’ search fields. In our holiday home example above, if you select 3 bed houses, this would have no effect on the other search boxes – even if your final search returned no results.

Parametric search

With dependent values, if we select 3 bedrooms, we’ll only be offered locations to select from, which have houses with 3 bedrooms. In fact we can choose to only present those options which will return results to our site visitors.

We’ve created a few parametric search forms using the new views on our examples site, you might want to take a peek.

Parametric search settings - defaultsOur first example, Find a house default values, is just a vanilla parametric search form with none of the new options selected. Our site visitor can select the search options, they want. Click the search button. The page will refresh showing the filter View results.The new Parametric search options have just been left with the default settings.

Dependent values

Update dynamically – using ajax

One very nice feature of the new search, is to apply the filter dynamically. As soon as the user selects a parameter, the filter is applied and the results set updated, without a page reload – i.e. using ajax. Just select to Update the View results every time an input changes. We’ve left this feature on for all our examples (we like it so much).

Parametric search - ajax load

Which options to display

Parametric search - show only available options
By default, we can display all options for our parameters and allow our site visitor to select from them – but we have a couple of more interesting alternatives.If we select Show only available options for each input, then we are not going to allow our site visitor to select options that will not produce results.

We’ve used this option on our examples Find a house (disabled) and Find a house (hidden). In both these examples we will only allow the visitor to choose options that will give us results.

So for example, there are no houses in our examples that have 1 or 2 beds.

In our disabled example, all the options are presented to the user, but 1 and 2 beds are disabled cannot be selected.

In our hidden example, the options for 1 and 2 beds that will not give results, are not shown on the search form.

Disable/Hide by control type

If you compare our disabled and hidden views on the example site, you’ll see that it probably makes sense to use disable in the case of checkboxes and radio buttons, and hide for selects and multi-selects.

The final choice will depend on your specific number of options and the display layout you are using.

Advanced options

Parametric search - advanced optionsSpinners settings – in our examples, the small number of results means our filter Views results are returned quickly and a spinner is just not necessary. You’ll probably want to enable this for any views where the result set could be large and paging is not enabled to limit it.
In addition to switching on the Spinner option in Advanced, you’ll also need to add a spinner shortcode to your View filter (see the spinner control below).

Javascript setting – this is a nice feature – an easy way to add functionality before and after the results are displayed.

Submit buttons settings – with auto update switched on – our search button becomes redundant – we just haven’t added the search button to our forms. If you select Don’t show here, your search button will just be given a class of display: none; – you’d be better off excluding completely from the search form when you build it.

The clear button and spinner control

Parametric search - new filter buttonsWe’ve got two new options on our filter window. We can add a Clear button to our form – you’ll see this on our examples. By the time you have selected three or four parameters, it’s a pain to reset them, so do add a Clear button on your search forms.

If you have enabled Spinners in the advanced section, then you’ll need to insert a spinner shortcode in your filter (just click the button). There are some nice options for positioning your spinner; the html container (wrapped in a DIV, P, or SPAN), and plenty of built in spinner choices – all in all, nicely done.

Summing up

Yes – this is great stuff and we’ll be using it a lot! It’s very easy to apply straight out of the box and will work for many different search types.

It works great on the desktop and on mobile devices. We haven’t check resource usage for the ajax load – but it’s probably sending a lot less data than a full page refresh.

If you are using disabled options, then you may need to override default styling to make it clearer to the user what they can click and what they can’t – we’re using Bootstrap and the default markup for disabled controls is difficult to distinguish from enabled controls in some instances.

Tell your users what to do!!

It’s not obvious without a big button that says SEARCH what this form is for. Think about usability – especially on mobile devices where your form and results may not be visible at the same time – this could be a good case to use those ajax hooks to bring the results into view after the ajax call completes.

But…..

There is always but and we’ll always want more!!

In our final example, Find a car, we’re missing something. Normally, for these types of linked searches, we want to select a make, and see the models for the selected make appear in the second parameter field, then select our model.

We don’t really want our visitor to be able to select a model without a make, and we’d like them to be able to always change the make, even if they have a model selected (have a play – it doesn’t work like this).

So perhaps in an upcoming version of Views, we might get some linked options on the controls themselves.

All in all this is great addition to Views.

2 Responses to “Views – Dependent values for parametric search – a first look”

  1. Marieke van de Pol

    Hello!

    I’m trying to make a filtering like this, but I cannot find this “clear button” in my editor?
    Where should I look for it?

    Kind regards,
    Marieke

  2. Loïc Eoka Day

    Thank you, great explanation!
    I play with that for a Tour Operator, it’s a really amazing tool.
    Do you know a way to have the search result in another page instead of under the search engine?
    Would be helpful.

    Thank you

Leave a Reply

You must be logged in to post a comment.