Search Form Plugin

Overview

The Search Form Plugin is a customizable and responsive search component designed for property search functionality. It supports both desktop and mobile views and provides various configuration options via HTML data attributes.

Features

• Responsive design (desktop and mobile)
• Location search with autocomplete
• Date range picker
• Guest selection
• Advanced filters (bedrooms, bathrooms, price range, amenities)
• Customizable brand colors
• URL parameter support

Installation

1. Include the script in your HTML

<script src="c" data-container-id="search-form-container"></script>

2. Create a container element

<div id="search-form-container"></div>

Configuration

Basic Configuration (via data attributes)

data-search-url

• Description: URL where the search form submits results
• Default: null
• Example:
  • data-search-url="/properties/search"

data-locations

• Description: Available locations (JSON array or comma-separated list)
• Default: []
• Example:
  • data-locations='[
  •   {"id": "16705", "name": "London"},
  •   {"id": "16703", "name": "Paris"},
  •   {"id": "16720", "name": "Rome"},
  •   {"id": "16740", "name": "New York"},
  •   {"id": "16790", "name": "Tokyo"}]'

data-brand

• Description: Custom brand colors
• Default: { "primary": "#1976d2", "secondary": "#dc004e" }
• Example:
  • data-brand='{"primary": "#5dc186", "secondary": "#dc004e"}'

data-show-dates

• Description: Show or hide date picker
• Default: "true"
• Example:
  • data-show-dates="false"

data-heading-text

• Description: Custom heading text for the search form
• Default: ""
• Example:
  • data-heading-text="Search for your dream vacation"
• Note: If set to an empty string, no heading will be displayed

data-show-pets

• Description: Show or hide the pets option in the guest selector
• Default: "false"
• Example:
  • data-show-pets="true"
• Note: When set to false, the pets section will be completely hidden in the guest selector

Guest Configuration

data-guests

• Description: Guest selector settings
• Default: { "show": true, "adults": 2, "children": 0 }
• Examples:
  • <!-- Show guest selector with custom values -->
  • data-guests='{"adults": 4, "children": 2, "infants": 1, "pets": 1}'
• <!-- Hide guest selector completely -->
  • data-guests='{"show": false}'

Filters and Highlights

data-filters

• Description: Filter options (e.g. amenities)
• Default: null
• Example:
  • data-filters='[
  •   {"id": "7232", "name": "Hot tub", "checked": false},
  •   {"id": "7240", "name": "Dog-friendly", "checked": true},
  •   {"id": "16809", "name": "Pet Free", "checked": false}]'

data-highlights

• Description: Highlight options (e.g. property type)
• Default: null
• Example:
  • data-highlights='[
  •   {"id": "16812", "name": "Cottage", "checked": true},
  •   {"id": "16813", "name": "House", "checked": false}]'

data-filter-settings

• Description: Which filters to show
• Default: { "showBedrooms": true, "showBathrooms": true }
• Example:
  • data-filter-settings='{"showBedrooms": true, "showBathrooms": true}'

Price Slider

data-price-slider='{
  "title": "Price Range",
  "min": 50,
  "max": 2000,
  "step": 100,
  "priceFilterType": "Nightly",
  "showNightly": true,
  "showWeekly": true
}'

Options:

title: Display title

min, max: Price range

step: Step increment

priceFilterType: "Nightly" or "Weekly"

showNightly, showWeekly: Show/hide respective filters

URL Parameters

Complete Example

<div id="search-form-container"
     data-search-url="/search"
     data-locations='[
       {"id": "16705", "name": "London"},
       {"id": "16703", "name": "Paris"},
       {"id": "16720", "name": "Rome"},
       {"id": "16740", "name": "New York"},
       {"id": "16790", "name": "Tokyo"}
     ]'
     data-brand='{"primary": "#5dc186", "secondary": "#dc004e"}'
     data-show-dates="true"
     data-show-pets="true"
     data-guests='{"adults": 4, "children": 2}'
     data-filters='[
       {"id": "7232", "name": "Hot tub", "checked": false},
       {"id": "7240", "name": "Dog-friendly", "checked": true},
       {"id": "16809", "name": "Pet Free", "checked": false}
     ]'
     data-highlights='[
       {"id": "16812", "name": "Cottage", "checked": true},
       {"id": "16813", "name": "House", "checked": false}
     ]'
     data-filter-settings='{"showBedrooms": true, "showBathrooms": true}'
     data-price-slider='{
       "title": "Price Range",
       "min": 50,
       "max": 2000,
       "step": 100,
       "priceFilterType": "Nightly",
       "showNightly": true,
       "showWeekly": true
     }'>
</div>

<script src="./dist/search-form.iife.js" data-container-id="search-form-container"></script>

Notes

• Use valid JSON in data attributes (ensure proper quotation and escaping).
• The script should be included after the container in the DOM.
• The component will read data attributes on load and initialise automatically.