The Quick Search displays a simpler, smaller search panel compared to the the standard Search Widget.

This widget is mobile responsive and will expand to fill any container / space made available in your website page design.

Minimum width: Designed for mobile.
Maximum width: Unlimited.

Highlights

  • Multiple versions provide choices for layout and fields
  • Manage background and transparency
  • Other customization options

Parameters

  • id="MBBv3_QuickSearch"
  • formType: {type} (optional)
  • + other options (see Advanced Options below)

How to Use

Choose the form type, copy the widget code (shown below) and paste into your web page.

Form Types

See the 3 types on this Quick Search Widget Example page:

1. default (vertical orientation)

The default Quick Search form has a vertical layout as shown below, which makes it suitable for web page "sidebars". If you embed the the widget code with no additional filter options then this will be displayed.

Widget Code
The default Quick Search Widget can be displayed using the following widget code:

<div id="MBBv3_QuickSearch"></div>
[mbb_widget id="MBBv3_QuickSearch"]

Customization Options

There are currently no additional options provided for this version.

1. simple1 (multiple-fields search form)

This mobile responsive search form will fit into any space on your website and will stretch up to 1200px wide. As the form width reduces, the form fields will break into multiple rows.
The image below shows how the form appears at around 900px wide.

The following search fields are provided:

  • area combination
  • price picker
  • beds
  • baths
  • property type (hidden or can be shown)

Widget Code
Use the following code to display the "simple1" quick search form.

<div id="MBBv3_QuickSearch" filter="formType:simple1"></div>
[mbb_widget id="MBBv3_QuickSearch" filter="formType:simple1"]
Customization Options
  • Change the background and border color and transparency
  • Preset the property_type (or display the property_type selection field)
  • Join all the form fields together , i.e. no spacing between fields
  • Show the 'Advanced Search Form' link

2. simple2 (single field search form)

This mobile responsive search form will fit into any space on your website and will stretch up to 1200px wide.
The image below shows how the form appears at around 900px wide.

The following search fields are provided:

  • area combination
  • property type (hidden or can be shown)

Widget Code
Use the following code to display the "simple2" quick search form.

<div id="MBBv3_QuickSearch" filter="formType:simple2"></div>
[mbb_widget id="MBBv3_QuickSearch" filter="formType:simple2"]
Customization Options
  • Change the background and border color and transparency
  • Preset the property_type (the property_type selection field cannot be displayed)
  • Add spacing between fields (default is no spacing)
  • Show the 'Advanced Search Form' link

3. multimls (has a MLS switcher)

This mobile responsive search form will fit into any space on your website and will stretch up to 1200px wide.
The image below shows how the form appears at around 900px wide.

This form is designed for accounts that have multiple MLS feeds as it shows a selector to allow the user to change the MLS search area.

The following search fields are provided:

  • city or area combination 
  • price picker
  • beds
  • baths
  • property type (hidden or can be shown)

Widget Code
Use the following code to display the "multimls" quick search form.

<div id="MBBv3_QuickSearch" filter="formType:multimls"></div>
[mbb_widget id="MBBv3_QuickSearch" filter="formType:multimls"]
Customization Options
  • Change the background and border color and transparency
  • Search from a city list or the area combination field (city, neighborhood, zip)

Examples

Example-1: To make simple1 only search residential AND the background and border completely transparent, we would add these filter options:
**IMPORTANT!! Make sure you get the correct value for property_type from the Widget Wizard as these can vary by MLS**
propertyType:residential+formBackground:0,0,0,0+formBorder:0,0,0,0

[mbb_widget id="MBBv3_QuickSearch" filter="formType:simple1+property_type:residential+formBackground:0,0,0,0+formBorder:0,0,0,0"]

Example-2: To show the 'Advanced Search' link on the simple2 form, we would add this filter option: formBackground:0,0,0,0+formBorder:0,0,0,0

<div id="MBBv3_QuickSearch" filter="formType:simple2+formBackground:0,0,0,0+formBorder:0,0,0,0"></div>
[mbb_widget id="MBBv3_QuickSearch" filter="formType:simple2+formBackground:0,0,0,0+formBorder:0,0,0,0"]

Advanced Options

  • If you want to modify the background and border colors and transparency - then use the various styling filter options
  • If you want to include the option to allow choice of property type then use the 'property_type:display' filter described below
  • If your form is only to be used to search one type of property (e.g. residential) then set this value using the 'property_type:{value}' filter described below.

Form name (OPTIONAL)

  • formType:{ XX } (If not specified, will show the default quick search form)
    Must be a valid form type name available from our library
    e.g. 'formType:XX'

Filter options for Search (OPTIONAL)

  • mls_id:{ value }
    To override the website default mls_id if your account has multiple MLS feeds,
    e.g. 'mls_id:tx492'
  • property_type:{ display | nodisplay | {value} }
    Default action: Field is not displayed and will search all types.
    • 'display' will show the option field on the form,
      e.g. 'property_type:display'
    • {value} will set the property type as a hidden value, i.e. to just search rentals, or residential etc,
      e.g. 'property_type:residential'
      **IMPORTANT!! Make sure you get the correct value for property_type from the Widget Wizard as these can vary by MLS**
  • help:{ display | nodisplay }
    Default action: Not displayed.
    Will display instructions and the array of filter values when the widget loads.
    e.g. 'help:display'

Show Advanced Search Link

  • advancedSearch:{ display | nodisplay }
    Default action: Not displayed.
    Will display a link to display the 'Advanced Search' form
    e.g. 'advancedSearch:display'

Filter options for Styling

  • formFontSize:{ value }
    Default action: Size will be 18px.
    Can be any valid font size value,
    e.g. 'formFontSize:1.5em'
  • formBackground:{ rgba value }
    Default action: Set background to be: '204,204,204,0.3' (pale translucent grey)
    Form background as 'rgba',
    e.g. 'formBackground:204,204,204,0.2'
  • formBorder:{ rgba value }
    Default action: Set border to be: '204,204,204,0.35' (pale grey)
    Form border as 'rgba',
    e.g. 'formBorder:204,204,204,0.25'
  • formFieldPadding:{ value }
    Default action: Set padding to be '8px' - spacing between fields.
    NOTE: Setting to '0' will remove all inter-field spacing and join the fields up.
    e.g. 'formFieldPadding:0'

Admin