From 7b10b85db4cee5ef35d910aaa7095125cab1d5af Mon Sep 17 00:00:00 2001 From: Marc Gagne Date: Sun, 28 May 2017 15:01:45 -0400 Subject: [PATCH 1/3] Introducing samples & updating references to use @latest syntax for css/js CDN. --- samples/realestate/AzSearch.css | 340 ++++++++++++++++++ samples/realestate/realestate.html | 293 +++++++++++++++ samples/realestate/realestate.local.html | 301 ++++++++++++++++ samples/realestate/realestate.no-filters.html | 257 +++++++++++++ 4 files changed, 1191 insertions(+) create mode 100644 samples/realestate/AzSearch.css create mode 100644 samples/realestate/realestate.html create mode 100644 samples/realestate/realestate.local.html create mode 100644 samples/realestate/realestate.no-filters.html diff --git a/samples/realestate/AzSearch.css b/samples/realestate/AzSearch.css new file mode 100644 index 0000000..1ab63e2 --- /dev/null +++ b/samples/realestate/AzSearch.css @@ -0,0 +1,340 @@ +/* + * Base structure + */ + +/* Move down content because we have a fixed navbar that is 50px tall */ +body { + padding-top: 50px; +} + +.searchBox__container { + float: left; +} + +.searchBox__suggestions-list { + padding-top: -10 px; + box-sizing: border-box; + padding-left: 0px; + margin-right: 1px; +} + +#searchBox { + padding-left: 0px; + padding-right: 0px; +} + +#searchBox { + padding-left: 0px; + padding-right: 0px; +} + +.searchBox__input-container { + margin-top: .5em; +} + +.searchBox__suggestion--focused { + background: #66afe9 !important; + color: white; +} + +.searchBox__suggestions-list li { + list-style: none; + padding-left: 1em; + padding-top: .5em; + padding-bottom: .5em; + background: white; + box-shadow: inset 0 0 0 1px #66afe9; + border-radius: 3px; +} + +.input-group-btn { + width:1% !important; +} + +.navbar { + max-height: 50px; +} + +.sorting__sortyBy select { + width: 100%; +} + +/* + * Global add-ons + */ + +.sub-header { + padding-bottom: 10px; + border-bottom: 1px solid #eee; +} + +/* + * Top navigation + * Hide default border to remove 1px line. + */ +.navbar-fixed-top { + border: 0; +} + +/* + * Sidebar + */ + +/* Hide for mobile, show later */ + +@media (min-width: 768px) { + .sidebar { + position: fixed; + top: 51px; + bottom: 0; + left: 0; + z-index: 1000; + display: block; + padding: 20px; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ + background-color: #f5f5f5; + border-right: 1px solid #eee; + } +} + +/* Sidebar navigation */ +.nav-sidebar { + margin-right: -21px; /* 20px padding + 1px border */ + margin-bottom: 20px; + margin-left: -20px; +} +.nav-sidebar > li > a { + padding-right: 20px; + padding-left: 20px; +} +.nav-sidebar > .active > a, +.nav-sidebar > .active > a:hover, +.nav-sidebar > .active > a:focus { + color: #fff; + background-color: #428bca; +} + +.navbar-header { + display: inline-block; +} + +#facetHeader, #facetFooter { + text-align: right; +} + + +/* + * Main content + */ + +.main { + padding: 20px; +} +@media (min-width: 768px) { + .main { + padding-right: 40px; + padding-left: 40px; + } +} +.main .page-header { + margin-top: 0; +} + + +/* + * Placeholder dashboard ideas + */ + +.placeholders { + margin-bottom: 30px; + text-align: center; +} +.placeholders h4 { + margin-bottom: 0; +} +.placeholder { + margin-bottom: 20px; +} +.placeholder img { + display: inline-block; + border-radius: 50%; +} + +/* facets */ + +.behclick-panel .list-group { + margin-bottom: 0px; +} +.behclick-panel .list-group-item:first-child { + border-top-left-radius:0px; + border-top-right-radius:0px; +} +.behclick-panel .list-group-item { + border-right:0px; + border-left:0px; +} +.behclick-panel .list-group-item:last-child{ + border-bottom-right-radius:0px; + border-bottom-left-radius:0px; +} +.behclick-panel .list-group-item { + padding: 5px; +} +.behclick-panel .panel-heading { + /* padding: 10px 15px; + border-bottom: 1px solid transparent; */ + border-top-right-radius: 0px; + border-top-left-radius: 0px; + border-bottom: 1px solid darkslategrey; +} +.behclick-panel .panel-heading:last-child{ + /* border-bottom: 0px; */ +} +.behclick-panel { + border-radius: 0px; + border-right: 0px; + border-left: 0px; + border-bottom: 0px; + box-shadow: 0 0px 0px rgba(0, 0, 0, 0); +} +.behclick-panel .radio, .checkbox { + margin: 0px; + padding-left: 10px; +} +.behclick-panel .panel-title > a, .panel-title > small, .panel-title > .small, .panel-title > small > a, .panel-title > .small > a { + outline: none; +} +.behclick-panel .panel-body > .panel-heading{ + padding:10px 10px; +} +.behclick-panel .panel-body { + padding: 0px; +} + /* unvisited link */ +a.searchResults__facetHeader-link { + text-decoration:none; +} + +/* range slider */ + +.slider { + margin-top: 1em; + margin-bottom: 1em; + margin-left: auto; + margin-right: auto; + width: 75%; + height: 3px; + background-color: #337ab7; + } + +.bar-1 { + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #337ab7; + margin-top: -9px; + margin-left: -9px; + box-shadow: 2px 2px 4px grey; +} + +.bar-2 { + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #337ab7; + margin-top: -9px; + margin-left: -9px; + box-shadow: 2px 2px 4px grey +} + +.rangeLabelWrapper { + margin-right: auto; + margin-left: auto; +} + +.results_section { + padding: 20px; +} + + +.checkboxLabel { + width: 100%; +} + +.list-group-item { + padding-left: 0; + padding-right: 0; +} + +.checkbox { + width: 100%; +} + +.results__blurb { + float: left; + padding-left: 15px; + padding-bottom: 10px; +} + +.searchFacets__sliderContainer { + width: 90% !important; + margin: auto +} + +.searchResults__checkboxFacet { + padding-top: 0px; + padding-bottom: 0px +} + +.searchResults__rangeFacet { + padding-top: 0px; + padding-bottom: 0px +} + +.searchResults__facetHeader-container { + padding-top: 0px; +} + +@media only screen and (max-width: 500px) { + .pagelabel { + font-size: 1em; + } +} + +@media only screen and (max-width: 420px) { + .pagelabel { + display: none; + font-size: 1em; + } + #searchBox { + margin-left: 2em; + } +} + +.searchResults__result { + margin-bottom: 2em; + float: left; + text-align: left; + overflow: auto; + word-wrap: break-word; + vertical-align: bottom; + border:0; + padding-left: 0; +} + +.resultLabel { + vertical-align: top; +} + + +.searchResults__result img { + top: 0; + bottom: 0; + left: 0; + right: 0; + margin-left: 0; + width: auto; + height: auto; + vertical-align: bottom; +} \ No newline at end of file diff --git a/samples/realestate/realestate.html b/samples/realestate/realestate.html new file mode 100644 index 0000000..ab3c71e --- /dev/null +++ b/samples/realestate/realestate.html @@ -0,0 +1,293 @@ + + + + + + + + + + + Real Estate + + + + + +
+ + +
+
+ +
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/samples/realestate/realestate.local.html b/samples/realestate/realestate.local.html new file mode 100644 index 0000000..c613dbb --- /dev/null +++ b/samples/realestate/realestate.local.html @@ -0,0 +1,301 @@ + + + + + + + + + + + Real Estate + + + + + +
+ + +
+
+ +
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/samples/realestate/realestate.no-filters.html b/samples/realestate/realestate.no-filters.html new file mode 100644 index 0000000..9b3053d --- /dev/null +++ b/samples/realestate/realestate.no-filters.html @@ -0,0 +1,257 @@ + + + + + + + + + + + Real Estate + + + + + +
+ + +
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + \ No newline at end of file From 923fafc7c26b3c7a81784cf256790b7cbbdef7c7 Mon Sep 17 00:00:00 2001 From: Marc Gagne Date: Sun, 28 May 2017 15:06:35 -0400 Subject: [PATCH 2/3] Removing root samples and updating README --- README.md | 4 +- realestate.html | 293 ---------------------------------------- realestate.local.html | 301 ------------------------------------------ 3 files changed, 2 insertions(+), 596 deletions(-) delete mode 100644 realestate.html delete mode 100644 realestate.local.html diff --git a/README.md b/README.md index 807f390..8f7e0e7 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Automagical UI and sample react controls for [Azure Search](https://docs.microso [![Build Status](https://travis-ci.org/EvanBoyle/AzSearch.js.svg?branch=master)](https://travis-ci.org/EvanBoyle/AzSearch.js) ## Live Demo -* [Real estate demo](https://azsearchstore.azurewebsites.net/realestate.html) | [source](https://github.com/EvanBoyle/AzSearch.js/blob/master/realestate.html) +* [Real estate demo](https://azsearchstore.azurewebsites.net/realestate.html) | [source](https://github.com/EvanBoyle/AzSearch.js/blob/master/samples/realestate.html) ## Get started developing an AzSearch.js app in Typescript * [Sample TypeScript project](https://github.com/EvanBoyle/AzSearch.jsTypeScriptStarter): clone, customize, and go. @@ -136,7 +136,7 @@ Sets basic configuration to connect to service. Expects an object of type Config ### addSearchBox * ```addSearchBox(htmlId, suggestionsParametersUpdate?, suggestionValueKey?, suggestionTemplate?, css?)``` -Adds an input field capable of suggestions/autocomplete and executing search requests. Attaches on the specified htmlID. Optionally takes SuggestionUpdateParameters (from AzSearchStore), an optional key indicating which suggestion value should be set when a suggestion is clicked (defaults to "@search.text"), a [mustache template](https://mustache.github.io/mustache.5.html) to customize rendering, or css overrides. When template is not specified, a json representation of the suggestions is displayed. When specified, the mustache template is rendered against east suggestion. The content of each suggestion can be customized by adding fields via the select parameter as shown in the example below, or by setting a +Adds an input field capable of suggestions/autocomplete and executing search requests. Attaches on the specified htmlID. Optionally takes SuggestionUpdateParameters (from AzSearchStore), an optional key indicating which suggestion value should be set when a suggestion is clicked (defaults to "@search.text"), a [mustache template](https://mustache.github.io/mustache.5.html) to customize rendering, or css overrides. When template is not specified, a json representation of the suggestions is displayed. When specified, the mustache template is rendered against east suggestion. The content of each suggestion can be customized by adding fields via the select parameter as shown in the example below, or by setting a [suggestions processor](https://github.com/EvanBoyle/AzSearchStore#client-side-results-processing) on the store. ```js // css class overrides diff --git a/realestate.html b/realestate.html deleted file mode 100644 index f482973..0000000 --- a/realestate.html +++ /dev/null @@ -1,293 +0,0 @@ - - - - - - - - - - - Real Estate - - - - - -
- - -
-
- -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/realestate.local.html b/realestate.local.html deleted file mode 100644 index c613dbb..0000000 --- a/realestate.local.html +++ /dev/null @@ -1,301 +0,0 @@ - - - - - - - - - - - Real Estate - - - - - -
- - -
-
- -
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - \ No newline at end of file From 3570349a6bfeac3e812af8c371cff91007fd4654 Mon Sep 17 00:00:00 2001 From: Marc Gagne Date: Wed, 14 Jun 2017 13:45:43 -0400 Subject: [PATCH 3/3] Moved into samples folder, fixed HTML errors --- samples/realestate/AzSearch.css | 340 ------------ samples/realestate/realestate.html | 511 +++++++++--------- samples/realestate/realestate.local.html | 301 ----------- samples/realestate/realestate.no-filters.html | 397 ++++++-------- 4 files changed, 437 insertions(+), 1112 deletions(-) delete mode 100644 samples/realestate/AzSearch.css delete mode 100644 samples/realestate/realestate.local.html diff --git a/samples/realestate/AzSearch.css b/samples/realestate/AzSearch.css deleted file mode 100644 index 1ab63e2..0000000 --- a/samples/realestate/AzSearch.css +++ /dev/null @@ -1,340 +0,0 @@ -/* - * Base structure - */ - -/* Move down content because we have a fixed navbar that is 50px tall */ -body { - padding-top: 50px; -} - -.searchBox__container { - float: left; -} - -.searchBox__suggestions-list { - padding-top: -10 px; - box-sizing: border-box; - padding-left: 0px; - margin-right: 1px; -} - -#searchBox { - padding-left: 0px; - padding-right: 0px; -} - -#searchBox { - padding-left: 0px; - padding-right: 0px; -} - -.searchBox__input-container { - margin-top: .5em; -} - -.searchBox__suggestion--focused { - background: #66afe9 !important; - color: white; -} - -.searchBox__suggestions-list li { - list-style: none; - padding-left: 1em; - padding-top: .5em; - padding-bottom: .5em; - background: white; - box-shadow: inset 0 0 0 1px #66afe9; - border-radius: 3px; -} - -.input-group-btn { - width:1% !important; -} - -.navbar { - max-height: 50px; -} - -.sorting__sortyBy select { - width: 100%; -} - -/* - * Global add-ons - */ - -.sub-header { - padding-bottom: 10px; - border-bottom: 1px solid #eee; -} - -/* - * Top navigation - * Hide default border to remove 1px line. - */ -.navbar-fixed-top { - border: 0; -} - -/* - * Sidebar - */ - -/* Hide for mobile, show later */ - -@media (min-width: 768px) { - .sidebar { - position: fixed; - top: 51px; - bottom: 0; - left: 0; - z-index: 1000; - display: block; - padding: 20px; - overflow-x: hidden; - overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ - background-color: #f5f5f5; - border-right: 1px solid #eee; - } -} - -/* Sidebar navigation */ -.nav-sidebar { - margin-right: -21px; /* 20px padding + 1px border */ - margin-bottom: 20px; - margin-left: -20px; -} -.nav-sidebar > li > a { - padding-right: 20px; - padding-left: 20px; -} -.nav-sidebar > .active > a, -.nav-sidebar > .active > a:hover, -.nav-sidebar > .active > a:focus { - color: #fff; - background-color: #428bca; -} - -.navbar-header { - display: inline-block; -} - -#facetHeader, #facetFooter { - text-align: right; -} - - -/* - * Main content - */ - -.main { - padding: 20px; -} -@media (min-width: 768px) { - .main { - padding-right: 40px; - padding-left: 40px; - } -} -.main .page-header { - margin-top: 0; -} - - -/* - * Placeholder dashboard ideas - */ - -.placeholders { - margin-bottom: 30px; - text-align: center; -} -.placeholders h4 { - margin-bottom: 0; -} -.placeholder { - margin-bottom: 20px; -} -.placeholder img { - display: inline-block; - border-radius: 50%; -} - -/* facets */ - -.behclick-panel .list-group { - margin-bottom: 0px; -} -.behclick-panel .list-group-item:first-child { - border-top-left-radius:0px; - border-top-right-radius:0px; -} -.behclick-panel .list-group-item { - border-right:0px; - border-left:0px; -} -.behclick-panel .list-group-item:last-child{ - border-bottom-right-radius:0px; - border-bottom-left-radius:0px; -} -.behclick-panel .list-group-item { - padding: 5px; -} -.behclick-panel .panel-heading { - /* padding: 10px 15px; - border-bottom: 1px solid transparent; */ - border-top-right-radius: 0px; - border-top-left-radius: 0px; - border-bottom: 1px solid darkslategrey; -} -.behclick-panel .panel-heading:last-child{ - /* border-bottom: 0px; */ -} -.behclick-panel { - border-radius: 0px; - border-right: 0px; - border-left: 0px; - border-bottom: 0px; - box-shadow: 0 0px 0px rgba(0, 0, 0, 0); -} -.behclick-panel .radio, .checkbox { - margin: 0px; - padding-left: 10px; -} -.behclick-panel .panel-title > a, .panel-title > small, .panel-title > .small, .panel-title > small > a, .panel-title > .small > a { - outline: none; -} -.behclick-panel .panel-body > .panel-heading{ - padding:10px 10px; -} -.behclick-panel .panel-body { - padding: 0px; -} - /* unvisited link */ -a.searchResults__facetHeader-link { - text-decoration:none; -} - -/* range slider */ - -.slider { - margin-top: 1em; - margin-bottom: 1em; - margin-left: auto; - margin-right: auto; - width: 75%; - height: 3px; - background-color: #337ab7; - } - -.bar-1 { - width: 20px; - height: 20px; - border-radius: 50%; - background-color: #337ab7; - margin-top: -9px; - margin-left: -9px; - box-shadow: 2px 2px 4px grey; -} - -.bar-2 { - width: 20px; - height: 20px; - border-radius: 50%; - background-color: #337ab7; - margin-top: -9px; - margin-left: -9px; - box-shadow: 2px 2px 4px grey -} - -.rangeLabelWrapper { - margin-right: auto; - margin-left: auto; -} - -.results_section { - padding: 20px; -} - - -.checkboxLabel { - width: 100%; -} - -.list-group-item { - padding-left: 0; - padding-right: 0; -} - -.checkbox { - width: 100%; -} - -.results__blurb { - float: left; - padding-left: 15px; - padding-bottom: 10px; -} - -.searchFacets__sliderContainer { - width: 90% !important; - margin: auto -} - -.searchResults__checkboxFacet { - padding-top: 0px; - padding-bottom: 0px -} - -.searchResults__rangeFacet { - padding-top: 0px; - padding-bottom: 0px -} - -.searchResults__facetHeader-container { - padding-top: 0px; -} - -@media only screen and (max-width: 500px) { - .pagelabel { - font-size: 1em; - } -} - -@media only screen and (max-width: 420px) { - .pagelabel { - display: none; - font-size: 1em; - } - #searchBox { - margin-left: 2em; - } -} - -.searchResults__result { - margin-bottom: 2em; - float: left; - text-align: left; - overflow: auto; - word-wrap: break-word; - vertical-align: bottom; - border:0; - padding-left: 0; -} - -.resultLabel { - vertical-align: top; -} - - -.searchResults__result img { - top: 0; - bottom: 0; - left: 0; - right: 0; - margin-left: 0; - width: auto; - height: auto; - vertical-align: bottom; -} \ No newline at end of file diff --git a/samples/realestate/realestate.html b/samples/realestate/realestate.html index ab3c71e..b16ce21 100644 --- a/samples/realestate/realestate.html +++ b/samples/realestate/realestate.html @@ -1,165 +1,170 @@ + + + - - - + + - - + + Real Estate - - Real Estate - - - - -
- + -
-
- -
-
-
+
+
+ -
+
+
+
+
+
+
@@ -170,124 +175,128 @@ - - - - - - - - - - + + + + - // Add a search box that uses suggester "sg", grabbing some additional fields to display during suggestions. Use the template defined above - automagic.addSearchBox("searchBox", - { - highlightPreTag: "", - highlightPostTag: "", - suggesterName: "sg", - select: "number,street,city,region,countryCode" - }, - "displayText", - suggestionsTemplate); - // add a results view using the template defined above - automagic.addResults("results", { count: true }, resultTemplate); - // Add a loading indicator above the results view - automagic.addLoadingIndicator("loading"); - // Adds a pager control << 1 2 3 ... >> - automagic.addPager("pager"); - // range facet for price - automagic.addRangeFacet("priceFacet", "price", "number", 0, 2000000); - // range facet for sqft - automagic.addRangeFacet("sqftFacet", "sqft", "number", 0, 17000); - // checkbox facet for numeric field beds - automagic.addCheckboxFacet("bedsFacet", "beds", "number"); - // checkbox facet for numeric field baths - automagic.addCheckboxFacet("bathsFacet", "baths", "number"); - // checkbox facet for collection field tags - automagic.addCheckboxFacet("tagsFacet", "tags", "collection"); - // filter header & footer options - automagic.addClearFiltersButton("facetHeader"); - automagic.addClearFiltersButton("facetFooter"); - // add sorting options - var fields = [ - { displayName: "Relevance", fieldName: "" }, - { displayName: "Price", fieldName: "price" }, - { displayName: "Size", fieldName: "sqft" }, - { displayName: "Beds", fieldName: "beds" }, - { displayName: "Baths", fieldName: "baths" } - ]; + + - // ask for users location and add a geo sorting option - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition(function (position) { - fields.push({ - displayName: "Distance", - fieldName: "location", - latitude: position.coords.latitude, - longitude: position.coords.longitude - }); - automagic.addSortBy("sortBy", fields, "beds"); - }, - function () { - // on rejection from user - automagic.addSortBy("sortBy", fields, "beds"); - }); - } else { - automagic.addSortBy("sortBy", fields, "beds"); - } - // static filter for home type - var filters = [ - { displayName: "Any", filter: "" }, - { displayName: "House", filter: "type eq 'House'" }, - { displayName: "Apartment", filter: "type eq 'Apartment'" } - ]; - var defaultFilter = ""; - var title = "Home Type"; - automagic.addStaticFilter("typeFilter", "type", filters, defaultFilter, title); + + // Create some mustache templates to customize result/suggestion display. Default is JSON.stringify(result,null,4) rendered in 
 and .
+            var resultTemplate =
+                `

+                    image not found
+                

+                

+                    
{{displayText}}

+                    

+                        {{{summary}}}
+                    

+                    
    
+                        
  • {{price}}
    • 
+                        
  • {{sqft}}ft2
    • 
+                        
  • {{beds}}
    • 
+                        
  • {{baths}}
    • 
+                    

+                
`;
+            var suggestionsTemplate = "{{displayText}} 
 {{{searchText}}}";
+
+            // Add a search box that uses suggester "sg", grabbing some additional fields to display during suggestions. Use the template defined above
+            automagic.addSearchBox("searchBox",
+                {
+                    highlightPreTag: "",
+                    highlightPostTag: "",
+                    suggesterName: "sg",
+                    select: "number,street,city,region,countryCode"
+                },
+                "displayText",
+                suggestionsTemplate);
+            // add a results view using the template defined above
+            automagic.addResults("results", { count: true }, resultTemplate);
+            // Add a loading indicator above the results view
+            automagic.addLoadingIndicator("loading");
+            // Adds a pager control << 1 2 3 ... >>
+            automagic.addPager("pager");
+            // range facet for price
+            automagic.addRangeFacet("priceFacet", "price", "number", 0, 2000000);
+            // range facet for sqft
+            automagic.addRangeFacet("sqftFacet", "sqft", "number", 0, 17000);
+            // checkbox facet for numeric field beds
+            automagic.addCheckboxFacet("bedsFacet", "beds", "number");
+            // checkbox facet for numeric field baths
+            automagic.addCheckboxFacet("bathsFacet", "baths", "number");
+            // checkbox facet for collection field tags
+            automagic.addCheckboxFacet("tagsFacet", "tags", "collection");
+            // filter header & footer options 
+            automagic.addClearFiltersButton("facetHeader");
+            automagic.addClearFiltersButton("facetFooter");
+            
+            // add sorting options
+            var fields = [
+
+                { displayName: "Relevance", fieldName: "" },
+                { displayName: "Price", fieldName: "price" },
+                { displayName: "Size", fieldName: "sqft" },
+                { displayName: "Beds", fieldName: "beds" },
+                { displayName: "Baths", fieldName: "baths" }
+            ];
+
+            // ask for users location and add a geo sorting option
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(function (position) {
+                    fields.push({
+                        displayName: "Distance",
+                        fieldName: "location",
+                        latitude: position.coords.latitude,
+                        longitude: position.coords.longitude
+                    });
+                    automagic.addSortBy("sortBy", fields, "beds");
+                },
+                    function () {
+                        // on rejection from user
+                        automagic.addSortBy("sortBy", fields, "beds");
+                    });
+            } else {
+                automagic.addSortBy("sortBy", fields, "beds");
+            }
 
+            // static filter for home type
+            var filters = [
+                { displayName: "Any", filter: "" },
+                { displayName: "House", filter: "type eq 'House'" },
+                { displayName: "Apartment", filter: "type eq 'Apartment'" }
+            ];
+            var defaultFilter = "";
+            var title = "Home Type";
+            automagic.addStaticFilter("typeFilter", "type", filters, defaultFilter, title);
+        
+    
 
\ No newline at end of file
diff --git a/samples/realestate/realestate.local.html b/samples/realestate/realestate.local.html
deleted file mode 100644
index c613dbb..0000000
--- a/samples/realestate/realestate.local.html
+++ /dev/null
@@ -1,301 +0,0 @@
-
-
-
-    
-    
-
-    
-    
-
-    
-    Real Estate
-
-    
-
-
-
-    

-        
-
-        

-            

-                
-                

-                    

-                    

-                    

-                    

-                    

-                

-            

-        

-        
-        
-        
-        
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/samples/realestate/realestate.no-filters.html b/samples/realestate/realestate.no-filters.html
index 9b3053d..f29f0e4 100644
--- a/samples/realestate/realestate.no-filters.html
+++ b/samples/realestate/realestate.no-filters.html
@@ -1,129 +1,134 @@
 
+    
+        
+        
 
-
-    
-    
+        
+        
 
-    
-    
+        
+        Real Estate
 
-    
-    Real Estate
-
-    
-
 
-
-    

-        
+            
 
-        

-            

-                

-                    

-                    

-                    

-                    

+            

+                

+                    

+                        

+                        

+                        

+                        

+                        

                     

                 

             

@@ -134,124 +139,76 @@
         
         
-
-
-
-
-
-
-
-
-
-
 
+        
+        
+        
+        
+        
+        
+
+        
+        
+
+        
+    
 
\ No newline at end of file