Configuration of extended search in Joomla

JBZoo search module in Joomla

10.0/10 rating (2 votes)

In one of our articles we examined how to arrange fields in a search form. By default, a field will look like it was created initially. So if it is a radio-button, it will be displayed as radio-buttons in a filter. Usually it’s convenient but not always.

JBZoo gives you even more flexibility because each field has it’s own set of settings. This way you can easily create a useful extended search in Joomla for your catalogue without any programming knowledge.

Main settings of filter elements

Basic filter settingsDepending on the element (field) type it can have different set of settings. But nonetheless all fields have basic (common) settings. Let’s examine them.

Labels in a filterShow label — whether to display element label in a filter or not. In the example below “Category”, “Form”, “Size” etc., are labels.

Alternative label — it is a text of a label. You can write custom label for your element here. Default value is a name of an element which were given to it during creation.

Filter template — allows you to set an appearance of an element in a filter form. For example, you added a simple text field and chosen a “Select” template for it. Now all available values of this field will be presented as a drop-down list on the website. You can also display this field as a set of checkboxes or radio-buttons.

Depending on the specific field, a list of possible templates could be different. Let’s examine templates available for a text field.

Templates for a text field

Auto — an element will use it’s own type. So for a text field it will be simple input field.

Text field in a filter

Text field — in this case it’s the same as “Auto”.

Range of numbers

Range of numbers — this template creates two fields for numbers. For example, if you have a price field, users will be able to search for a product with a price between 1000 and 3000 USD or between 3200 and 4000 USD. Keep in mind that in this case this field should only contain numeric values, otherwise the filter will not work.

A field as a set of checkboxes

Checkbox — a set of checkboxes. Values will be selected from the values of this field in existing items.

Stylized buttons

jQuery.ui buttons — a set of stylized buttons based on jQuery UI. It works as a set of checkboxes but looks completely different.

Element as radio-buttons

Radio-buttons — with this template elements will look like radio-buttons.

Element as a drop-down list

Select — filter field will be displayed as a simple drop-down list.

jQuery.chosen element template in a filter

Select (jQuery.chosen) — it is a stylized list with an input field. When a user enters first letters he will be offered to select from an existing list.

The range of numbers - slider

The range of numbers - slider — displays a slider with handles.

Filtering of items by date

Date — jQuery. UI datepicker widget will be used. The filter will work correctly only if the inputted values meet the standard which is set by the widget. For example, “2012-11-01” for the “November 11, 2012”.

Search by a range of dates

Date range — it is almost the same as a “Date” template. But there are two fields now so users are able to specify a range of dates.

 

Hidden field — it is an invisible value of a filter that can’t be changed by users. For example, you can set a search by a specific category or by items which contain specific values. If you choose this template, don’t forget to specify a “Default value”. Then a filter will forcibly search by this value without user’s knowledge.

Category list template

Category list (only for the category field) — it is the same as a “Select” template but is used only for categories.

Category list (jQuery.chosen) template

Category list (jQuery.chosen) — it is the same as a “Select (jQuery.chosen)” template but is used only for categories.

Default value

In order to make things easier for users, you can set a default values for a filter. In this case specific values will be already selected in the form. But a user will be able to change them and filter as he wants.

For example, if you want AMD processor to be selected initially, you should specify it as a “Default value”.

The result of a default value

For the complex data you should use JSON format. For example, for the multiple select of several cities you should specify this for the “Default value”:

{0:'Chicago',1:'Detroit',2:'Boston'}

In order to set a range of numbers from 30 to 70, for example, you should specify this:

{'range':'30/70'}

Additional settings of a filter

Multiple select

Multiple select (yes/no) — if you choose “yes” then users will be able to select several values. In the example below a user have chosen several countries of manufacture.

Count of items Show count (yes/no) — if you choose “yes” then a number of matching items will be displayed next to a filter value. In the example below only 13 products have nVidia cards.
Autocomplete for the text fields of a form Autocomplete (yes/no) — it is applicable only for text or numeric input fields. When a user begins typing a word, a list of matching variants will be displayed automatically. This list is based on existing items.
Additional settings of a slider Slider configuration — you can set a minimum and maximum values for a slider, a step by which a slider value will be changed. There is also an option to automatically set minimum and maximum values based on the actual values of this element in existing items.

Settings for categories

List mode — how should a category list be displayed:

Category list appearance

Simple category list

Simple — a simple drop-down list.

Nested tree category list

Nested tree — displays category nesting.

Parent categories list

Parent categories — only main categories of the first level will be displayed.

Child categories list

Child categories — only child categories will be displayed.

Filter

Still gotta questions, who can help me?

Visit our special JBZoo tech support forum which is specifically meant for JBZoo so the priority of the response and its promptness are much better there than in any other place. With inactive account with a “Plus” sign in a tariff plan you can ask for support in one of these sections or use any of our contacts.