@stratusjs/idx/src/property/search.compact.component.min.html

AngularJS idx/property Service and Components bundle to be used as an add on to StratusJS

<div id="{{elementId}}" class="property-search property-search-compact search-mini font-primary" data-ng-cloak><div class="search-row"><h2 data-ng-show="widgetName" data-ng-bind="widgetName"></h2><div layout="row" layout-gt-sm="row"><div class="search-input" data-flex-gt-sm="40"><md-input-container class="md-block minimal"><label>City, Neighborhood, Zip, Address</label> <input data-ng-if="!options.query.where.Location" data-ng-model="options.query.where.eLocation" type="text" maxlength="250" data-ng-keyup="$event.keyCode == 13 && search()" autocomplete="off"> <input data-ng-if="options.query.where.Location" data-ng-model="options.query.where.Location" type="text" maxlength="250" data-ng-keyup="$event.keyCode == 13 && search()" autocomplete="off"></md-input-container></div><div class="search-input" data-flex-gt-sm="10"><md-input-container class="md-block minimal"><label>Min Price</label> <input stratus-string-to-number="comma" data-ng-model="options.query.where.ListPriceMin" type="text" maxlength="11" size="8" autocomplete="off"></md-input-container></div><div class="search-input" data-flex-gt-sm="10"><md-input-container class="md-block minimal"><label>Max Price</label> <input stratus-string-to-number="comma" data-ng-model="options.query.where.ListPriceMax" type="text" maxlength="11" size="8" autocomplete="off"></md-input-container></div><div class="search-input" data-flex-gt-sm="10"><md-input-container class="md-block minimal"><label>Beds</label><md-select data-ng-model="options.query.where.Bedrooms"><md-option></md-option><md-option data-ng-repeat="option in options.selection.Bedrooms" data-ng-value="option.value">{{option.name}}</md-option></md-select></md-input-container></div><div class="search-input" data-flex-gt-sm="10"><md-input-container class="md-block minimal"><label>Baths</label><md-select data-ng-model="options.query.where.Bathrooms"><md-option></md-option><md-option data-ng-repeat="option in options.selection.Bathrooms" data-ng-value="option.value">{{option.name}}</md-option></md-select></md-input-container></div><div class="search-row" data-flex-gt-sm="20"><a class="btn btn-submit" data-ng-click="search()">Search Now</a></div></div></div><div class="search-row" data-layout="row" data-layout-align="space-around center"><div style="display: none; visibility: hidden;"><div class="stratus-idx-property-search-menu property-search-compact md-whiteframe-z2"><div class="outer-padding" data-layout="column" data-layout-align="space-around center"><div class="property-specs" data-layout="row"><div class="search-input" data-flex="50" data-flex-gt-sm="25"><md-input-container class="md-block minimal"><label>Min Price</label> <input stratus-string-to-number="comma" data-ng-model="options.query.where.ListPriceMin" type="text" maxlength="11" size="8" autocomplete="off"></md-input-container></div><div class="search-input" data-flex="50" data-flex-gt-sm="25"><md-input-container class="md-block minimal"><label>Max Price</label> <input stratus-string-to-number="comma" data-ng-model="options.query.where.ListPriceMax" type="text" maxlength="11" size="8" autocomplete="off"></md-input-container></div><div class="search-input" data-flex="50" data-flex-gt-sm="25"><md-input-container class="md-block minimal"><label>Beds</label><md-select data-ng-model="options.query.where.Bedrooms"><md-option></md-option><md-option data-ng-repeat="option in options.selection.Bedrooms" data-ng-value="option.value">{{option.name}}</md-option></md-select></md-input-container></div><div class="search-input" data-flex="50" data-flex-gt-sm="25"><md-input-container class="md-block minimal"><label>Baths</label><md-select data-ng-model="options.query.where.Bathrooms"><md-option></md-option><md-option data-ng-repeat="option in options.selection.Bathrooms" data-ng-value="option.value">{{option.name}}</md-option></md-select></md-input-container></div></div><div class="property-specs-border dotted-spaced-underline"></div><div class="toggle-switch" data-layout="row" data-layout-align="center center" aria-label="Listings to Buy or Rent"><div class="option-choice font-primary" data-ng-class="{inactive: options.forRent}" data-flex>Buy</div><md-switch data-ng-model="options.forRent" data-ng-change="selectDefaultListingType()" aria-label="Buy or Rent" data-flex></md-switch><div class="option-choice font-primary" data-ng-class="{inactive: !options.forRent}" data-flex>Rent</div></div><div data-layout="row" data-ng-show="!options.forRent" data-layout-align="space-around center" aria-label="Listing Status"><md-button class="md-raised font-primary" data-ng-class="{'md-primary': _.includes(options.query.where.Status, 'Active')}" data-ng-click="options.query.where.Status = ['Active', 'Contract'];" aria-label="For Sale" data-md-prevent-menu-close>For Sale</md-button><md-button class="md-raised font-primary" data-ng-class="{'md-primary': _.includes(options.query.where.Status, 'Closed')}" data-ng-click="options.query.where.Status = ['Closed']" aria-label="Sold" data-md-prevent-menu-close>Sold</md-button></div><div data-ng-show="!options.forRent || _.includes(options.query.where.Status, 'Contract')"><md-checkbox class="show-under-contract font-secondary" data-ng-checked="_.includes(options.query.where.Status, 'Contract')" data-ng-click="toggleArrayElement('Contract', options.query.where.Status)" aria-label="Under Contract" data-md-prevent-menu-close>Show Under Contract</md-checkbox></div><md-checkbox data-ng-show="isPresetLocationSet() || options.query.where.eLocation.length || options.query.where.Location.length || options.query.where.AgentLicense.length || options.query.where.OfficeNumber.length" class="show-open-houses font-secondary" data-ng-model="options.query.where.OpenHouseOnly" aria-label="Open Houses Only" data-md-prevent-menu-close>Open Houses Only</md-checkbox><div class="sale-status-border dotted-spaced-underline"></div><div class="property-zoning" data-layout="row" data-layout-align="space-around center" aria-label="Listing Zoning"><md-button class="font-primary" data-ng-class="{'md-primary': options.selection.ListingType.group.Residential}" data-ng-click="selectDefaultListingType('Residential')" aria-label="Residential" data-md-prevent-menu-close>Residential</md-button><md-button class="font-primary" data-ng-class="{'md-primary': options.selection.ListingType.group.Commercial}" data-ng-click="selectDefaultListingType('Commercial')" aria-label="Commercial" data-md-prevent-menu-close>Commercial</md-button></div><div data-layout="row" data-layout-align="center center" aria-label="Listing Types" data-layout-wrap><md-button data-ng-repeat="listType in ::options.selection.ListingType.All" class="md-raised font-primary" data-ng-show="options.forRent === listType.lease && options.selection.ListingType.group[listType.group]" data-ng-class="{'md-primary': _.includes(options.query.where.ListingType, listType.value)}" data-ng-click="toggleArrayElement(listType.value, options.query.where.ListingType)" aria-label="{{::listType.name}}" data-md-prevent-menu-close data-ng-bind="::listType.name"></md-button></div><div data-ng-if="options.query.where.eCity.length || options.query.where.City.length || options.query.where.eCountyOrParish.length || options.query.where.CountyOrParish.length || options.query.where.eMLSAreaMajor.length || options.query.where.MLSAreaMajor.length || options.query.where.PostalCode.length"><div class="sale-status-border dotted-spaced-underline"></div><h3 data-layout-align="space-around center">Preset Filters</h3><div class="specific-filters" data-layout="row" data-layout-align="space-around center" aria-label="Specific Areas"><div class="search-input" data-ng-if="options.query.where.eCity.length"><md-chips class="city-id font-secondary" aria-label="Cities to Limit" data-ng-model="options.query.where.eCity" data-md-enable-chip-edit="true" data-md-add-on-blur="true" data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]" data-placeholder="City" data-secondary-placeholder="+City" data-delete-button-label="Remove City" data-delete-hint="Press delete to remove City"></md-chips></div><div class="search-input" data-ng-if="options.query.where.City.length"><md-chips class="city-id font-secondary" aria-label="Cities to Limit" data-ng-model="options.query.where.City" data-md-enable-chip-edit="true" data-md-add-on-blur="true" data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]" data-placeholder="City" data-secondary-placeholder="+City" data-delete-button-label="Remove City" data-delete-hint="Press delete to remove City"></md-chips></div><div class="search-input" data-ng-if="options.query.where.eCountyOrParish.length"><md-chips class="area-id font-secondary" aria-label="Counties to Limit" data-ng-model="options.query.where.eCountyOrParish" data-md-enable-chip-edit="true" data-md-add-on-blur="true" data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]" data-placeholder="County" data-secondary-placeholder="+County" data-delete-button-label="Remove County" data-delete-hint="Press delete to remove County"></md-chips></div><div class="search-input" data-ng-if="options.query.where.CountyOrParish.length"><md-chips class="area-id font-secondary" aria-label="Counties to Limit" data-ng-model="options.query.where.CountyOrParish" data-md-enable-chip-edit="true" data-md-add-on-blur="true" data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]" data-placeholder="County" data-secondary-placeholder="+County" data-delete-button-label="Remove County" data-delete-hint="Press delete to remove County"></md-chips></div><div class="search-input" data-ng-if="options.query.where.eMLSAreaMajor.length"><md-chips class="area-id font-secondary" aria-label="Areas to Limit" data-ng-model="options.query.where.eMLSAreaMajor" data-md-enable-chip-edit="true" data-md-add-on-blur="true" data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]" data-placeholder="Area Major" data-secondary-placeholder="+Area" data-delete-button-label="Remove Area" data-delete-hint="Press delete to remove Area"></md-chips></div><div class="search-input" data-ng-if="options.query.where.MLSAreaMajor.length"><md-chips class="area-id font-secondary" aria-label="Areas to Limit" data-ng-model="options.query.where.MLSAreaMajor" data-md-enable-chip-edit="true" data-md-add-on-blur="true" data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]" data-placeholder="Area Major" data-secondary-placeholder="+Area" data-delete-button-label="Remove Area" data-delete-hint="Press delete to remove Area"></md-chips></div><div class="search-input" data-ng-if="options.query.where.eNeighborhood.length"><md-chips class="area-id font-secondary" aria-label="Neighborhoods to Limit" data-ng-model="options.query.where.eNeighborhood" data-md-enable-chip-edit="true" data-md-add-on-blur="true" data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]" data-placeholder="Neighborhood" data-secondary-placeholder="+Neighborhood" data-delete-button-label="Remove Neighborhood" data-delete-hint="Press delete to remove Neighborhood"></md-chips></div><div class="search-input" data-ng-if="options.query.where.Neighborhood.length"><md-chips class="area-id font-secondary" aria-label="Neighborhoods to Limit" data-ng-model="options.query.where.Neighborhood" data-md-enable-chip-edit="true" data-md-add-on-blur="true" data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]" data-placeholder="Neighborhood" data-secondary-placeholder="+Neighborhood" data-delete-button-label="Remove Neighborhood" data-delete-hint="Press delete to remove Neighborhood"></md-chips></div><div class="search-input" data-ng-if="options.query.where.PostalCode.length"><md-chips class="postal-code font-secondary" aria-label="Postal Code(s) to Limit" data-ng-model="options.query.where.PostalCode" data-md-enable-chip-edit="true" data-md-add-on-blur="true" data-md-separator-keys="[$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA]" data-placeholder="Postal Code" data-secondary-placeholder="+PostalCode" data-delete-button-label="Remove Postal Code" data-delete-hint="Press delete to remove Postal Code"></md-chips></div></div></div><div class="sale-status-border dotted-spaced-underline"></div><div data-layout="row" data-layout-align="space-around center"><a class="btn" data-ng-click="search();filterMenu.close();">Search</a></div></div></div></div><a class="open-filters" data-ng-click="showInlinePopup($event, '.stratus-idx-property-search-menu')">Advanced Filters</a></div></div>