Omnibar Customizations

The following examples demonstrate a few ways you can customize the IDX Broker Omnibar widget using JavaScript/jQuery.

These customizations include:

• Adding placeholder text to Omnibar fields
• Converting the Min Price and Max Price fields into dropdown menus

Add Placeholder Text to Beds and Baths Fields

The following script adds placeholder text to the Beds and Baths fields within the Omnibar widget.

You can also modify this script to apply placeholder text to additional fields such as Min Price or Max Price.

<script>
function placeholders() {
  document.querySelector("input[class=idx-omnibar-bed]")
    .setAttribute("placeholder", "Beds");

  document.querySelector("input[class=idx-omnibar-bath]")
    .setAttribute("placeholder", "Baths");
}

jQuery(document).ready(placeholders);
</script>

Convert Min Price and Max Price Fields Into Dropdowns

The following script replaces the default Min Price and Max Price input fields with dropdown selectors.

This can provide a cleaner user experience and help standardize search price ranges.

Note: You may need to update #idx_omnibar_widget-2 to match the widget ID being used on your site.

<script type="text/javascript">

jQuery(document).ready(function($) {

  $('#idx_omnibar_widget-2 .idx-omnibar-min-price-container').html(
    '<select class="idx-omnibar-min-price" name="lp">' +
    '<option value="">Min Price</option>' +
    '<option value="50000">$50,000</option>' +
    '<option value="100000">$100,000</option>' +
    '<option value="150000">$150,000</option>' +
    '<option value="200000">$200,000</option>' +
    '<option value="250000">$250,000</option>' +
    '<option value="300000">$300,000</option>' +
    '<option value="400000">$400,000</option>' +
    '<option value="500000">$500,000</option>' +
    '<option value="750000">$750,000</option>' +
    '<option value="1000000">$1,000,000</option>' +
    '</select>'
  );

  $('#idx_omnibar_widget-2 .idx-omnibar-max-price-container').html(
    '<select class="idx-omnibar-price" name="hp">' +
    '<option value="">Max Price</option>' +
    '<option value="50000">$50,000</option>' +
    '<option value="100000">$100,000</option>' +
    '<option value="150000">$150,000</option>' +
    '<option value="200000">$200,000</option>' +
    '<option value="250000">$250,000</option>' +
    '<option value="300000">$300,000</option>' +
    '<option value="400000">$400,000</option>' +
    '<option value="500000">$500,000</option>' +
    '<option value="750000">$750,000</option>' +
    '<option value="1000000">$1,000,000</option>' +
    '</select>'
  );

  $('.idx-omnibar-bath').attr(({step:1}));

});

</script>

Notes

• The dropdown price values can be customized to fit your market.
• Additional fields can also be modified using similar methods.
• These scripts should typically be added:
  • to your website theme,
  • inside a custom JavaScript file,
  • or within a custom HTML block/module depending on your platform.