Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--
Updated 3/26/18 : improved css and html for responsive layout
For general guidance and help see http://support.mybuyingbuddy.com/codepen/

Create a type ahead selection box for city.
Use a SELECT form element for CITY
- class="" : this must be the same class referenced in the JavaScript
  In the example this is .searchform-city
- name="" : this MUST be set to be "city[]" (notice the square brackets!)
- placeholder="" : and other variables are optional
-->
<!-- Buying Buddy Plugin for codepen.io -->
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyAlDq8fLYmfwIZdmngXCW6Ts80NIlhjwi8'></script>
<script src='https://www.mbb2.com/version3/css/theme/acid/OLrJDh'></script>
<script>
var MBB = { mbbUrl: 'https://www.mbb2.com/version3', seo : 'false' };
MBB.data = { acid : 'OLrJDh', mbbdomain : 'codepen.io' };
</script>
<script src='https://www.mbb2.com/scripts/my-buying-buddy.4.0.js'></script>
<!-- End Buying Buddy Plugin -->

<!--TITLE ONLY-->
<section id="pen-title">
    <h2>(cs#2) Type-ahead City Selection in a Search Form</h2>
  <p style="color:red">Updated October 2020 to improve accessibility.</p>
<p><small><a href="https://support.mybuyingbuddy.com/codepen/#disclaimer" target="_blank">PLEASE READ DISCLAIMER</a></small></p>
  
</section>


<!--BEGIN CODE TO COPY -->
<div id="MBBv3Form">
     <div class="bfg-grid-container">
          <div class="custom-form-wrapper clearfix">
               <form id="form-1" class="mbb-lcf-form">
                    <!-- The MBB defined MLS ID for your MLS -->
                    <input type="hidden" name="mls_id" value="demo" />
                    <!--End Form Header--> 
                    
                 <!--Row Container-->
                    <div class="bfg-grid-100 bfg-tablet-grid-100 bfg-mobile-100 bfg-grid-parent"> 
                         
                      <!--Start Text Box Placeholder-->
                         <div class="bfg-grid-30 bfg-tablet-grid-25 bfg-mobile-100">
                              <div class="bfg-input-wrap">
                                   <div class="bfg-input-item"> 
                                        <!--Make sure the class matches the class in the JavaScript-->
                                        <select name="city[]" class="searchform-city" multiple placeholder="Start typing city name.." aria-label="Start typing city name..">
                                        </select>
                                   </div>
                              </div>
                         </div>
     
                         <!--Start Selector Placeholder-->
                         <div class="bfg-grid-15 bfg-tablet-grid-15 bfg-mobile-grid-50">
                              <div class="bfg-input-wrap">
                                   <div class="bfg-input-item">
                                        <select name="price_min" class="bfg-input-field" aria-label="price min">
                                             <option value="" selected="" disabled="">Price Min</option>
                                             <option value="50000">$50,000</option>
                                             <option value="100000">$100,000</option>
                                             <option value="200000">$200,000</option>
                                             <option value="300000">$300,000</option>
                                             <option value="400000">$400,000</option>
                                             <option value="500000">$500,000</option>
                                             <option value="600000">$600,000</option>
                                             <option value="700000">$700,000</option>
                                             <option value="800000">$800,000</option>
                                             <option value="900000">$900,000</option>
                                             <option value="1000000">$1,000,000</option>
                                             <option value="1500000">$1,500,000</option>
                                             <option value="2000000">$2,000,000</option>
                                             <option value="3000000">$3,000,000</option>
                                             <option value="4000000">$4,000,000</option>
                                             <option value="5000000">$5,000,000</option>
                                             <option value="10000000">$10,000,000</option>
                                        </select>
                                   </div>
                              </div>
                         </div>
                         <!--End Selector Placeholder--> 
                         <!--Start Selector Placeholder-->
                         <div class="bfg-grid-15 bfg-tablet-grid-15 bfg-mobile-grid-50">
                              <div class="bfg-input-wrap">
                                   <div class="bfg-input-item">
                                        <select name="price_max" class="bfg-input-field" aria-label="Price max">
                                             <option value="" selected="" disabled="">Price Max</option>
                                             <option value="100000">$100,000</option>
                                             <option value="200000">$200,000</option>
                                             <option value="300000">$300,000</option>
                                             <option value="400000">$400,000</option>
                                             <option value="500000">$500,000</option>
                                             <option value="600000">$600,000</option>
                                             <option value="700000">$700,000</option>
                                             <option value="800000">$800,000</option>
                                             <option value="900000">$900,000</option>
                                             <option value="1000000">$1,000,000</option>
                                             <option value="1500000">$1,500,000</option>
                                             <option value="2000000">$2,000,000</option>
                                             <option value="3000000">$3,000,000</option>
                                             <option value="4000000">$4,000,000</option>
                                             <option value="5000000">$5,000,000</option>
                                             <option value="10000000">$10,000,000</option>
                                        </select>
                                   </div>
                              </div>
                         </div>
                         <!--End Selector Placeholder--> 

                         
                         <!--Start Selector Placeholder-->
                         <div class="bfg-grid-15 bfg-tablet-grid-15 bfg-mobile-grid-50">
                              <div class="bfg-input-wrap">
                                   <div class="bfg-input-item">
                                        <select name="bedrooms_total_min" class="bfg-input-field" aria-label="Minimum bedrooms">
                                             <option value="" selected="" disabled="">Bedrooms</option>
                                             <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>
                                             <option value="6">6+</option>
                                        </select>
                                   </div>
                              </div>
                         </div>
                         <!--End Selector Placeholder--> 
                         <!--Start Selector Placeholder-->
                         <div class="bfg-grid-15 bfg-tablet-grid-15 bfg-mobile-grid-50">
                              <div class="bfg-input-wrap">
                                   <div class="bfg-input-item">
                                        <select name="baths_total_min" class="bfg-input-field" aria-label="Minimum bathrooms">
                                             <option value="" selected="" disabled="">Bathrooms</option>
                                             <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>
                                             <option value="6">6+</option>
                                        </select>
                                   </div>
                              </div>
                         </div>
                         <!--Start Search Button--> 
                          <div class="bfg-hidden bfg-tablet-hidden bfg-mobile-show bfg-mobile-grid-50">
                         	&nbsp;
                         </div>                      
                         <div class="bfg-grid-10 bfg-tablet-grid-15 bfg-mobile-grid-50">
                           <a href="#" class="bfg-btn" onclick="MBBv3_SubmitCustomSearchForm('form-1','https://s.codepen.io/bluefiregroup/details/f442f6eb6eaa6d832f015bbb8e24d545/');return false;"><i class="icon-search"></i> GO!</a>
                         </div>
                         <!--End Search Button--> 
                    </div>
                    <!--End row container-->
               </form>
          </div>
     </div>
</div>
<!-- END CODE TO COPY -->
              
            
!

CSS

              
                /*
Helps reduce spaces between fields for smaller displays
*/
@media (max-width: 1024px) {
  #MBBv3Form .bfg-grid-container [class^="bfg-grid-"]:not(.bfg-grid-parent)   {
    padding-left: 5px;
    padding-right: 5px;
  }
}

#MBBv3Form .bfg-btn { /* helps the button fill the space */
  width:100%;
  text-align:center;
}

/*
This CSS wrapper is optional and provides the translucent background. 
All other CSS comes from the MBB plugin.
*/
.custom-form-wrapper {
  padding-top: 20px;
	padding-bottom: 5px;
  border-radius: 2px;
  border-color: #dddddd;
  border-width: 1px;
  border-style: solid;
  background: rgba(255,255,255,0.2);
}

              
            
!

JS

              
                /* 
** This script REQUIRES jQuery **
   If your website does not have jQuery loading then you will to add it.
   There are many hosted libraries available, for example, Google provides such libraries at
   https://developers.google.com/speed/libraries/#jquery

INSTRUCTIONS
============

1. Copy this JavaScript to your website and place in the <head> of the web page. 
   *** YOU MUST enclose between script tags ***

2. Identify the [ url: "https://www.mbb2.com..... ] line in the script code below
   >>> MAKE THE FOLLOWING *TWO* CHANGES <<<
   For help on parameters see http://support.mybuyingbuddy.com/codepen/
   
   (a) /mls/demo/ - change "demo" to be YOUR MBB mls_id e.g. /mls/co234/
   IMPORTANT: This is NOT the name of your MLS, this is a special MBB-MLS code 
   that we assign to the MLS. 
   You can discover this by creating a FILTER and identifying the mls_id parameter value.
   
   (b) /auth_key/728iu4y49ru-7dbmdews11z/ - change to be YOUR API-Authocode
       e.g. /auth_key/[YOUR_API-AUTHCODE]
       Your API Auth Key can be found in your LAC account -
       go to My Account > Account & Preferences, then go to the "Preferences" tab. Scroll down to see your account API-Authcode.
   
3. Ensure that in your HTML the <select> for city has class="searchform-city"
*/

jQuery(document).on("mbb-widgets-loaded", function() {
  mbbQuery.ajax({
    /*                                                */
    /* CHANGE THE TWO PARAMETERS IN THE LINE BELOW    */
    /* https://www.mbb2.com/mbb/autocomplete/param/city/mls/[YOUR_MBB_MLS_CODE]/auth_key/[YOUR_API-AUTHCODE] */
    /*                                                */
    url: "https://www.mbb2.com/mbb/autocomplete/param/city/mls/demo/auth_key/728iu4y49ru-7dbmdews11z",
    type: "POST",
    dataType: "jsonp",
    success: function(response) {
      mbbQuery.each(response, function(key, val) {
        var html ='<option value="' + val.value + '">' + val.label + "</option>";
        mbbQuery(".searchform-city").append(html);
      });
      mbbQuery(".searchform-city").select2({ width: "100%" });
    }
  });
});

              
            
!
999px

Console