Custom Search with Auto-Populate Select Lookup Function

This is a method for use with a custom search form to auto-populate lookup lists form fields based on a prior selection on the form.

This logic can be nested at any number of levels and can be applied to any appropriate MLS fields that can generate a list of selectable values.

Example-1

• Select County, this populates the City list with matching values
  • Then pick City which populates the Subdivision list with matching values
    • Then pick subdivision

Example-2

• Pick City which populates the Subdivision list with matching values
  • Then pick subdivision

Example-3

• Select Island, this populates the Region list with matching values
  • Then pick Region which populates the Neighborhood list with matching values
    • Then pick Neighborhood

Example-4

• Select City, this populates the School Districts list with matching values
  • Then pick School District

Note: This method does NOT require or assume any relationship between any of the fields. The method simply executes a search for the next tier field and returns matching values.

Method

Before you start, make sure you have the API-Authcode for your Buying Buddy account.

To get the API-Authcode - login to your Buying Buddy dashboard and go to Account > Account Settings. Scroll down to see your account API-Authcode.

Step-1: Create custom search form

The first step is to design and create your custom search form. See Custom Search Forms for how to do this.

Step-2: Create selection lists

Update your <select> fields so that they have the special class that links them to the JavaScript. In order, these should given classes as follows (as many as you require)

• tier1-select
• tier2-select
• tier3-select

The <select> tag should have a correct "name", but otherwise be empty.

Step-3: Add and Edit the JavaScript

The following adjustments need to be made in the JavaScript. Use the Wizards in the Buying Buddy dashboard to generate filters if needed so that you can identify the various field names.

1) Change Ajax call in the JavaScript to use your Account API auth_key.

Identify this line of code in the JavaScript and add your own Account API-Authcode value.

url: "https://www.mbb2.com/api/fields/get-field-lookup/auth_key/[YOUR_API-AUTHCODE]"

2) Change the mls_id value to reflect the correct ID from your account.

var params = { "mls_id" : "[YOUR_MBB_MLS_CODE]", "field" : "county", "select" : "tier1-select" }

In the JavaScript you will see pairs like this: "mls_id" : "demo"
Change "demo" to be your MBB mls_id - e.g "ca45"
Make sure you change this in all places.

3) Change the tier1 "field" name to reflect the field you are using.

var params = { "mls_id" : "demo", "field" : "county", "select" : "tier1-select" }

In the JavaScript you will see pairs like this: "field" : "county"
Change "county" to be the field name for your tier1 field.

4) Change the initial Value set on the first field <select>.

In the example below this is set to "Adams".

<select name="county" data-initial-val="Adams" class="tier1-select bfg-input-field">

For your form, you must set this to be a valid value for the field you are using, or set it to be blank (="").

5) Change the tier2 "field" name to reflect the field you are using.

var params = { "mls_id" : "demo", "field" : "city", "select" : "tier2-select", "search_field" : "county", "search_val" : selVal  }

In the JavaScript you will see a pair like this: "field" : "city"
Change "city" to be the field name for your tier1 field.

6) Change the "search-field" name for tier2 to reflect the tier-1 field you are using.

var params = { "mls_id" : "demo", "field" : "city", "select" : "tier2-select", "search_field" : "county", "search_val" : selVal  }

In the same line as step#2, you will see a pair like this: "search_field" : "county"
Change "county" to be the field name for your tier1 field.

7) Repeat steps #3 and #4 for Tier 3 and any additional tiers you decide to use.

Example Code

See the Pen Auto-populate select fields custom search form by Buying Buddy (@bluefiregroup) on CodePen.