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.
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.
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).
Which options to display
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.
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.
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).
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
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.
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.
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.