Create Custom Advanced Search Page

If you want total control over how the search page looks then your best bet is to build your own custom search page.
The main key in order to have this function is to make sure the action URL in the opening form tag is absolute and the field names and option values are what we use in our system.

You can get the field names and option values by visiting a search page, inspecting the element using your developer tools. You can get the field names but not option values under Preferences –> MLS Settings –> Core Fields or MLS Advanced fields, or you can get via the API using the below two calls:

Search Fields: http://middleware.idxbroker.com/docs/api/methods/index.html#api-MLS-getSearchfields
Search Field Values: http://middleware.idxbroker.com/docs/api/methods/index.html#api-MLS-getSearchfieldvalues

Via the API you can also get the property types, zip codes, cities, and counties:

Property Types: http://middleware.idxbroker.com/docs/api/methods/index.html#api-MLS-getPropertytypes
Zip Codes: http://middleware.idxbroker.com/docs/api/methods/index.html#api-MLS-getZipcodes
Cities: http://middleware.idxbroker.com/docs/api/methods/index.html#api-MLS-getCities
Counties: http://middleware.idxbroker.com/docs/api/methods/index.html#api-MLS-getCounties

For this lesson we will just inspect the elements on the search page to build a custom search form.

The first thing I would do would be to go to the advanced search page and view the page source. You can then do a search for form and you should be something like this, with the domain name being different.:

You will want to copy from the opening form tag to the closing form tag. This will not include advanced fields as they are loaded via JS. You will need to inspect the advanced fields using your developer tools to get the field names and option values.

The highlighted div within the developer tools would be the div for the first field called Test which is really considered the “Area” field.
You should be able to right click, and choose copy element in order to get the HTML code for that div, the field names, and the option values.

You then have the ability to add that code to your actual form.

If you would like to remove option values you would just look at the HTML, and then just remove whatever option values you would like from the form.

If you want to add your own CSS then you can do so in order to style it as you would like. Or you could always add the IDX Broker Stylesheet to your pages so the search form would look as it does on our hosted pages. The stylesheet can be found by going to the search page, viewing page source, and right below the opening head tag you should see something like this which will be different depending on your domain:

Note: Depending on what you are trying to do there may be additional scripts you will need to add to your custom form page which show on the IDX Page. One of those is jQuery library, there is a script below the closing form tag and there is a script all the way at the bottom. You will need to make sure that all URL’s are absolute as well.

This is just a quick overview of the basics to building a custom search form. This would give you the ability to change the bedrooms or bathrooms to an input box instead of a drop down, or change the min price max price to a slider, or input boxes, as well as remove option values from advanced fields.

We have multiple different types of search fields as well that you can use:

• List – This search type is available whenever the MLS data for this field is provided in a finite number of possible options. This is the most common advanced search type used. When selected, the user is presented with a list of options from which they can choose one or multiple items.
• Quick List – This will give the user a text box to type their search. Any options that match their search as they’re typing will appear in the drop-down.
• Keyword – Use “Keyword” when you want to allow the user to match listings to any of the search terms they use. For example, searching for “Sherwood Village North” will include all properties that have the word “Sherwood” (Sherwood, Sherwood City, etc.) and also all properties that have the word “Village” (South Village, Village in the Oaks, etc.), and all properties with the word “North” in them. This brings up the broadest results and is the most commonly used to get the best results. You can even group several words together by wrapping them in double quotes and separating the rest of the keywords with spaces.
• Yes/No – The user is given 2 choices from which they can choose only one, ‘yes’ or ‘no’. This type of search will only match data fields that have values of “yes” or “no” in the feed.
• Minimum – For numeric data only. The user can type in a number and the search will only return properties whose data is a number equal to or greater than the number entered.
• Maximum – For numeric data only. The user can type in a number and the search will only return properties whose data is a number equal to or less than the number entered.
• Min/Max – For numeric data only. The user is given both minimum and maximum fields so that they can choose a range of values.
• Text – Use “Text” when you want the user to search for the exact value in the field. For example, if the user searches for “N Sherwood Village” in a subdivision field, only listings with that exact phrase in their Subdivision will show in the results. “North Sherwood Village” will not be included in the results for that search.
  • Note: “Text” search is NOT case-sensitive, so “SHERWOOD VILLAGE”, or “sherWoOd VillAge” will return the same results.
• Wild Text – Use “Wild Text” when you want to allow the user to search for partial value in the field. For example, Searching for “Sherwood Village” would bring up all listings that have both the words “Sherwood” and “Village” in them. This would include listings in “North Sherwood Village” but not ones in “Sherwood Vil.”
  • Note: If you would like to put the Remarks field into your Advanced search layout, always use “Wild Text” for the best results.

List – Would be a_[fieldname][]=
Keyword – Would be k_[fieldname]=
Yes/No – &a_[fieldname]=Yes or No
Minimum – amin_[fieldname]=
Maximum – amax_[fieldname]=
Min/Max – amin_[fieldname]=[value]&amax_[fieldname]=[value]