Widget Docs

# Quick Search

It is common for housing sales sites to have a way for users to "quick search" from other locations within their website, such as a small form in a box on the homepage. We do not have a widget for this, but we do have some tips to help you integrate this feature with our search page widget.

All that we are aiming to do is take the user to our search URL, with our search params. Below are the params that are currently supported, along with some code examples demonstrating how we set up the quick search functionality.

TIP

You are welcome to achieve the above however you like, but the examples we provide below are Javascript solutions. As long as the URL params are present when the page loads, the search should use them accordingly.

# Basic

A small, simple location search form.

<!-- Note: Be sure to change the action parameter to match your search url -->
<form method="GET" action="/search" id="basicSearchForm"
    onsubmit="return submitBasicSearch(event)">

    <label for="location">Location</label>
    <input type="text" name="location" id="location">
    
    <button type="submit">Submit</button>
</form>

function submitBasicSearch(e) {
    e.preventDefault();
    let form = document.getElementById('basicSearchForm');
    let field = document.getElementById('location');          
    const params = field.name + '=' + field.value;
                             
    setTimeout(function(){
        window.location.href=form.action + '?' + params;
    },0)          
}

# Advanced

If you plan on having more fields and you think that this may change frequently, we can get a little smarter with the script. You can see in our HTML snippet, we have added a select dropdown and a checkbox to what was our basic form.

<!-- Note: Be sure to change the action parameter to match your search url -->
<form method="GET" action="/search" id="quickSearchForm"
    onsubmit="return submitAdvancedSearch(event)">

    <label for="location">Location</label>
    <input type="text" name="location" id="location">
    
    <label for="minbedrooms">Minimum bedrooms</label>
    <select name="bedrooms" id="minbedrooms">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <input name="new_homes" value="1" type="checkbox" id="exampleCheck1">
    <label for="exampleCheck1">New homes only</label>

    <button type="submit">Submit</button>
</form>

We then update the script to automatically build the parameters from any fields within our form, whilst making sure to exclude any elements that we do not want adding to the param list. See the code comments documenting each step.

function submitAdvancedSearch(e) {
    e.preventDefault();
    let form = document.getElementById('quickSearchForm');          
    let params = '';

    /* Loop through all form elements */
    for( var i=0; i<form.elements.length; i++ )
    {
        let addParam = true;
        var fieldName = form.elements[i].name;
        var fieldValue = form.elements[i].value;

        /* Loop through bedrooms dropdown */
        if(fieldName == 'bedrooms' && fieldValue > 0) {
            for( var j=fieldValue; j<6; j++ ) {
                params += fieldName + '=' + j + '&';
            }
        }

        /* Exclude any unchecked checkboxes */
        if(form.elements[i].type == 'checkbox' && form.elements[i].checked === false) {
            addParam = false;
        }

        /* Exclude the submit button */
        if(form.elements[i].type == 'submit') {
            addParam = false;
        }            

        /* Add field name and value to params */
        if(addParam) {
            params += fieldName + '=' + fieldValue + '&';
        }          
    }

    setTimeout(function(){
        window.location.href=form.action + '?' + params;
    },0)          
}

# Filter Parameters

Below are the URL parameters currently supported by our search component. How many are in use will depend on which filters you have enabled in the configuration.

Property Description
location Location search term
occupancy_type e.g: for-sale / rent
bedrooms Number of bedrooms (1 per filter)
radius Search radius distance in miles
page Page number
sort_by Property sort order (e.g nearest)

# Example

/properties?location=United%20Kingdom&radius=3&bedrooms=1&bedrooms=2&bedrooms=3&occupancy_type=for-sale&sort_by=recommended&page=1

← Configuration →