From 6b97e46ac55233e60a1612b309044514836787af Mon Sep 17 00:00:00 2001
From: Miriam Zusin <no81no@gmail.com>
Date: Fri, 26 Aug 2016 16:10:56 +0300
Subject: [PATCH] added clear button to the store locator autocomplete

---
 demo/16-store-locator-bundle.html             | 21 +++--
 dist/css/jplist.core.min.css                  |  2 +-
 dist/css/jplist.store-locator-bundle.min.css  |  2 +-
 dist/js/jplist.store-locator-bundle.min.js    | 27 +++---
 .../store-locator-bundle/css/styles.less      | 11 +++
 .../autocomplete-control/autocomplete-view.js | 90 ++++++++++---------
 .../autocomplete-control/dom-filters-addon.js |  3 +-
 .../store-locator-bundle/js/config.json       |  2 +-
 src/core/css/styles.less                      | 20 +++++
 9 files changed, 110 insertions(+), 68 deletions(-)

diff --git a/demo/16-store-locator-bundle.html b/demo/16-store-locator-bundle.html
index 8682e29..917e16f 100644
--- a/demo/16-store-locator-bundle.html
+++ b/demo/16-store-locator-bundle.html
@@ -145,15 +145,18 @@ <h1 class="h1-30-normal">jPList Store Locator Bundle</h1>
                             </ul>
                         </div>
 
-                        <input
-                                class="jplist-map-autocomplete"
-                                data-control-type="google-autocomplete-control"
-                                data-control-name="google-autocomplete-control"
-                                data-control-action="filter"
-                                data-radius="100000"
-                                type="text"
-                                placeholder="Enter a location"
-                        />
+                        <div class="jplist-map-autocomplete">
+                            <i class="fa fa-map-marker jplist-icon" aria-hidden="true"></i>
+                            <input
+                                    data-control-type="google-autocomplete-control"
+                                    data-control-name="google-autocomplete-control"
+                                    data-control-action="filter"
+                                    data-radius="100000"
+                                    type="text"
+                                    placeholder="Enter a location"
+                            />
+                            <i class="fa fa-times-circle jplist-clear" aria-hidden="true" data-type="clear"></i>
+                        </div>
 
                         <!-- data-radius in meters -->
 
diff --git a/dist/css/jplist.core.min.css b/dist/css/jplist.core.min.css
index 87133a3..550c351 100644
--- a/dist/css/jplist.core.min.css
+++ b/dist/css/jplist.core.min.css
@@ -1 +1 @@
-.lato{font-family:Lato,sans-serif}.jplist-hidden{display:none}.jplist-sticky{position:fixed;width:100%;left:0;top:0;z-index:1000;background:#f1f1f1;padding-bottom:5px}.sticky-demo .panel>.center{max-width:100%}.sticky-demo .jplist-sticky>.center{max-width:95%}.no-cssgradients .jplist-panel button:hover{background:#f4f4f4}.jplist-panel{color:#27252a}.jplist-panel button{float:left;height:30px;box-shadow:0 0 1px #fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;background:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#efefef));background:-webkit-linear-gradient(top,#fff 0,#efefef 100%);background:linear-gradient(to bottom,#fff 0,#efefef 100%);margin:10px 10px 0 0}.jplist-panel button:hover{color:#0381bb;background:#f2f2f2;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fafafa),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#fafafa 0,#ededed 100%);background:linear-gradient(to bottom,#fafafa 0,#ededed 100%)}.jplist-panel button.jplist-disabled{background:#e3e3e3;color:#6c6c6c;cursor:default}.jplist-panel button.jplist-selected{color:#f03800}.jplist-panel input[type=text]{float:left;height:30px;box-shadow:0 0 1px #fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;width:150px;text-indent:5px;background:#fff}.jplist-panel input[type=checkbox],.jplist-panel input[type=radio]{float:left;display:inline-block;height:30px;background:#fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;color:#27252a}.jplist-panel label{float:left;height:30px;line-height:30px;padding:0 5px;display:inline-block;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;color:#27252a;cursor:pointer}.jplist-icon{float:left;height:30px;box-shadow:0 0 1px #fff;background:#fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;display:inline-block;line-height:30px;padding:0 10px;border-right:0}.jplist-icon:hover{color:#0381bb}.jplist-label{float:left;height:30px;box-shadow:0 0 1px #fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;line-height:30px;padding:0 10px;margin:10px 10px 0 0;background:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#efefef));background:-webkit-linear-gradient(top,#fff 0,#efefef 100%);background:linear-gradient(to bottom,#fff 0,#efefef 100%)}.jplist-selected{color:#CA3F1A}.jplist-box{float:left;height:30px;margin:10px 10px 0 0}@media only screen and (max-width:600px){.jplist-panel{display:none}}.jplist-drop-down{float:left;height:30px;box-shadow:0 0 1px #fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;width:150px;background:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#efefef));background:-webkit-linear-gradient(top,#fff 0,#efefef 100%);background:linear-gradient(to bottom,#fff 0,#efefef 100%);margin:10px 10px 0 0;position:relative}.jplist-drop-down .jplist-dd-panel{float:left;width:150px;height:30px;line-height:30px;overflow:hidden;text-indent:10px;cursor:pointer}.jplist-drop-down .jplist-dd-panel:after{content:'\25BC';color:#111;display:inline-block;position:absolute;right:10px;z-index:1000}.jplist-drop-down ul{-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:0 0 3px 3px;position:relative;top:0;z-index:1000;width:148px;display:none;overflow:hidden;background:#fff;list-style:none;margin:0;padding:0;box-shadow:0 3px 6px #bbb}.jplist-drop-down ul li{width:100%;float:left;height:30px;line-height:30px;text-indent:10px;cursor:pointer}.jplist-drop-down ul li:hover{background-color:#ececec}.jplist-drop-down:hover .jplist-dd-panel{color:#0381bb}.jplist-drop-down:hover .jplist-dd-panel:after{color:#0381bb}.jplist-select{height:30px;box-shadow:0 0 1px #fff;background:#fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;float:left;margin:10px 10px 0 0;padding:5px;text-shadow:none}.jplist-ios-button{display:none}@media only screen and (max-width:600px){.jplist-ios-button{display:block;width:100%;text-align:center;cursor:pointer;font-size:15px;line-height:30px;float:left;height:30px;box-shadow:0 0 1px #fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;background:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#efefef));background:-webkit-linear-gradient(top,#fff 0,#efefef 100%);background:linear-gradient(to bottom,#fff 0,#efefef 100%)}.jplist-ios-button:hover{background:#f2f2f2;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fafafa),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#fafafa 0,#ededed 100%);background:linear-gradient(to bottom,#fafafa 0,#ededed 100%)}.jplist-ios-show{display:block}}
\ No newline at end of file
+.lato{font-family:Lato,sans-serif}.jplist-hidden{display:none}.jplist-sticky{position:fixed;width:100%;left:0;top:0;z-index:1000;background:#f1f1f1;padding-bottom:5px}.sticky-demo .panel>.center{max-width:100%}.sticky-demo .jplist-sticky>.center{max-width:95%}.no-cssgradients .jplist-panel button:hover{background:#f4f4f4}.jplist-panel{color:#27252a}.jplist-panel button{float:left;height:30px;box-shadow:0 0 1px #fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;background:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#efefef));background:-webkit-linear-gradient(top,#fff 0,#efefef 100%);background:linear-gradient(to bottom,#fff 0,#efefef 100%);margin:10px 10px 0 0}.jplist-panel button:hover{color:#0381bb;background:#f2f2f2;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fafafa),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#fafafa 0,#ededed 100%);background:linear-gradient(to bottom,#fafafa 0,#ededed 100%)}.jplist-panel button.jplist-disabled{background:#e3e3e3;color:#6c6c6c;cursor:default}.jplist-panel button.jplist-selected{color:#f03800}.jplist-panel input[type=text]{float:left;height:30px;box-shadow:0 0 1px #fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;width:150px;text-indent:5px;background:#fff}.jplist-panel input[type=checkbox],.jplist-panel input[type=radio]{float:left;display:inline-block;height:30px;background:#fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;color:#27252a}.jplist-panel label{float:left;height:30px;line-height:30px;padding:0 5px;display:inline-block;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;color:#27252a;cursor:pointer}.jplist-icon{float:left;height:30px;box-shadow:0 0 1px #fff;background:#fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;display:inline-block;line-height:30px;padding:0 10px;border-right:0}.jplist-icon:hover{color:#0381bb}.jplist-label{float:left;height:30px;box-shadow:0 0 1px #fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;line-height:30px;padding:0 10px;margin:10px 10px 0 0;background:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#efefef));background:-webkit-linear-gradient(top,#fff 0,#efefef 100%);background:linear-gradient(to bottom,#fff 0,#efefef 100%)}.jplist-clear{color:#666;cursor:pointer;float:left;height:30px;line-height:27px;padding:0 4px;background:#fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-left:0;border-radius:0 3px 3px 0;text-shadow:1px 1px 1px #fff}.jplist-clear:hover{color:#444}.jplist-selected{color:#CA3F1A}.jplist-box{float:left;height:30px;margin:10px 10px 0 0}@media only screen and (max-width:600px){.jplist-panel{display:none}}.jplist-drop-down{float:left;height:30px;box-shadow:0 0 1px #fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;width:150px;background:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#efefef));background:-webkit-linear-gradient(top,#fff 0,#efefef 100%);background:linear-gradient(to bottom,#fff 0,#efefef 100%);margin:10px 10px 0 0;position:relative}.jplist-drop-down .jplist-dd-panel{float:left;width:150px;height:30px;line-height:30px;overflow:hidden;text-indent:10px;cursor:pointer}.jplist-drop-down .jplist-dd-panel:after{content:'\25BC';color:#111;display:inline-block;position:absolute;right:10px;z-index:1000}.jplist-drop-down ul{-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:0 0 3px 3px;position:relative;top:0;z-index:1000;width:148px;display:none;overflow:hidden;background:#fff;list-style:none;margin:0;padding:0;box-shadow:0 3px 6px #bbb}.jplist-drop-down ul li{width:100%;float:left;height:30px;line-height:30px;text-indent:10px;cursor:pointer}.jplist-drop-down ul li:hover{background-color:#ececec}.jplist-drop-down:hover .jplist-dd-panel{color:#0381bb}.jplist-drop-down:hover .jplist-dd-panel:after{color:#0381bb}.jplist-select{height:30px;box-shadow:0 0 1px #fff;background:#fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;float:left;margin:10px 10px 0 0;padding:5px;text-shadow:none}.jplist-ios-button{display:none}@media only screen and (max-width:600px){.jplist-ios-button{display:block;width:100%;text-align:center;cursor:pointer;font-size:15px;line-height:30px;float:left;height:30px;box-shadow:0 0 1px #fff;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #dbdbdb;border-radius:3px;text-shadow:1px 1px 1px #fff;color:#27252a;background:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#efefef));background:-webkit-linear-gradient(top,#fff 0,#efefef 100%);background:linear-gradient(to bottom,#fff 0,#efefef 100%)}.jplist-ios-button:hover{background:#f2f2f2;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fafafa),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#fafafa 0,#ededed 100%);background:linear-gradient(to bottom,#fafafa 0,#ededed 100%)}.jplist-ios-show{display:block}}
\ No newline at end of file
diff --git a/dist/css/jplist.store-locator-bundle.min.css b/dist/css/jplist.store-locator-bundle.min.css
index ff673a8..91e5c8e 100644
--- a/dist/css/jplist.store-locator-bundle.min.css
+++ b/dist/css/jplist.store-locator-bundle.min.css
@@ -1 +1 @@
-.lato{font-family:Lato,sans-serif}.jplist-store-locator-bundle .jplist-panel{width:100%;float:left;margin:20px 0}.jplist-no-results{text-align:center}.jplist-google-maps-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100%}.jplist-google-maps-row .stores-box{width:250px;height:500px;background:#fff;overflow-x:auto}.jplist-google-maps-row .jplist-map-panel{width:calc(100% - 250px);height:500px}.jplist-google-maps-row .jplist-map{width:100%;height:100%}@media (max-width:600px){.jplist-google-maps-row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.jplist-google-maps-row .jplist-map-panel{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;margin:10px 0;width:100%;height:300px}.jplist-google-maps-row .stores-box{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%;height:auto}}.jplist-store-locator-bundle .store{cursor:pointer;padding:3px 7px;margin:0;border-bottom:1px dashed #ccc;text-shadow:1px 1px 1px #fff}.jplist-store-locator-bundle .store:hover{background-color:#DFE5FF}.jplist-store-locator-bundle .jplist-active-store{background-color:#DFE5FF}.jplist-store-locator-bundle .title{font-family:verdana;font-size:13px;line-height:13px;color:#CA3F1A}.jplist-store-locator-bundle .tags{color:#7F4F24}.jplist-panel .jplist-map-autocomplete{height:30px;float:left;margin:10px 10px 0 0}
\ No newline at end of file
+.lato{font-family:Lato,sans-serif}.jplist-store-locator-bundle .jplist-panel{width:100%;float:left;margin:20px 0}.jplist-no-results{text-align:center}.jplist-google-maps-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100%}.jplist-google-maps-row .stores-box{width:250px;height:500px;background:#fff;overflow-x:auto}.jplist-google-maps-row .jplist-map-panel{width:calc(100% - 250px);height:500px}.jplist-google-maps-row .jplist-map{width:100%;height:100%}@media (max-width:600px){.jplist-google-maps-row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.jplist-google-maps-row .jplist-map-panel{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;margin:10px 0;width:100%;height:300px}.jplist-google-maps-row .stores-box{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;width:100%;height:auto}}.jplist-store-locator-bundle .store{cursor:pointer;padding:3px 7px;margin:0;border-bottom:1px dashed #ccc;text-shadow:1px 1px 1px #fff}.jplist-store-locator-bundle .store:hover{background-color:#DFE5FF}.jplist-store-locator-bundle .jplist-active-store{background-color:#DFE5FF}.jplist-store-locator-bundle .title{font-family:verdana;font-size:13px;line-height:13px;color:#CA3F1A}.jplist-store-locator-bundle .tags{color:#7F4F24}.jplist-panel .jplist-map-autocomplete{height:30px;float:left;margin:10px 10px 0 0}.jplist-panel .jplist-map-autocomplete .jplist-icon{background:#E8EFF9;font-size:15px;border-radius:3px 0 0 3px}.jplist-panel .jplist-map-autocomplete input[type=text]{border-right:0;border-radius:0}
\ No newline at end of file
diff --git a/dist/js/jplist.store-locator-bundle.min.js b/dist/js/jplist.store-locator-bundle.min.js
index b62b5ea..ea187ec 100644
--- a/dist/js/jplist.store-locator-bundle.min.js
+++ b/dist/js/jplist.store-locator-bundle.min.js
@@ -1,20 +1,21 @@
 /**
  * jPList - jQuery Data Grid Controls
- * jPList Store Locator Bundle 5.2.0.12 - http://jplist.com
+ * jPList Store Locator Bundle 5.2.0.18 - http://jplist.com
  * Copyright 2016 Miriam Zusin
  *
  * Free for non commercial use only
  * To use this file on commercial sites you should purchase a licence at http://jplist.com
  */
-(function(){var b=function(a,c){for(var e,f=[],b=0;b<c.length;b++)e=c[b],e=new jQuery.fn.jplist.controls.GoogleMapsControl.StoreModel(e.$item),f.push(e);a.params.mapView.setStores(f)},c=function(a){a.observer.on(a.observer.events.collectionReadyEvent,function(c,e){a.params.dataitems=e.dataitems;b(a,a.params.dataitems)});a.observer.on(a.observer.events.statusesAppliedToList,function(c,e){a.params.dataview=e.dataview;b(a,a.params.dataview)});a.observer.on("jplist.map.store.clicked",function(c,e,f){a.params.mapView.showStore(e,
-f,a.params.userSettings.storeZoom)})},d=function(a){a.params={userSettings:{},mapView:null,storesView:null,dataitems:[],dataview:[]};var b=a.params,e;e={latitude:Number(a.$control.attr("data-latitude"))||0,longitude:Number(a.$control.attr("data-longitude"))||0,initialZoom:Number(a.$control.attr("data-initil-zoom"))||2,mapTypeId:a.$control.attr("data-map-type")||"ROADMAP",storeZoom:Number(a.$control.attr("data-store-zoom"))||17,geolocation:"true"===a.$control.attr("data-geolocation"),openInfoWindowOnStoreClick:a.$control.attr("data-open-popup-store-click")||
-!1,customMarkerIcon:a.$control.attr("data-marker-icon"),markerText:a.$control.attr("data-marker-text")||"Click to Zoom"};b.userSettings=e;a.params.mapView=new jQuery.fn.jplist.controls.GoogleMapsControl.MapView(a.params.userSettings,a.observer,a.$control);a.params.storesView=new jQuery.fn.jplist.controls.GoogleMapsControl.StoresView(a.params.userSettings,a.observer,a.$root.find(a.options.itemsBox),a.options.itemPath);c(a);return jQuery.extend(this,a)};jQuery.fn.jplist.controls.GoogleMapsControl=function(a){return new d(a)};
-jQuery.fn.jplist.controlTypes["google-maps-control"]={className:"GoogleMapsControl",options:{}}})();(function(){var b=function(a,c){for(var b,d=0;d<a.stores.length;d++)b=a.stores[d],b.remove();a.stores=[];a.stores=c;if(a.mapCanvas)for(b=0;b<c.length;b++)d=c[b],d.marker=new jQuery.fn.jplist.controls.GoogleMapsControl.MarkerModel(a.observer,d.longitude,d.latitude,a.mapCanvas,a.userSettings.markerText,d.html)},c=function(a,c,b,d){c=new google.maps.LatLng(c,b);a.mapCanvas.setCenter(c);a.mapCanvas.setZoom(d)},d=function(a){for(var c=0;c<a.stores.length;c++)a.stores[c].closeStorePopup()},a=function(a){a.userSettings.geolocation&&
-navigator.geolocation&&navigator.geolocation.getCurrentPosition(function(b){c(a,b.coords.latitude,b.coords.longitude,a.userSettings.storeZoom)})},g=function(c){window.google&&window.google.maps&&window.google.maps.event.addDomListener(window,"load",function(){var d;d=new google.maps.LatLng(c.userSettings.latitude,c.userSettings.longitude);c.mapCanvas=new window.google.maps.Map(c.$map.get(0),{mapTypeId:google.maps.MapTypeId[c.userSettings.mapTypeId],center:d,zoom:c.userSettings.initialZoom});b(c,c.stores);
-a(c)});c.observer.on("jplist.map.marker.clicked",function(a,b,g){d(c)})};jQuery.fn.jplist.controls.GoogleMapsControl.MapView=function(a,c,b){this.userSettings=a;this.$map=b;this.observer=c;this.mapCanvas=null;this.stores=[];g(this)};jQuery.fn.jplist.controls.GoogleMapsControl.MapView.prototype.showLocation=function(a,b,d){c(this,a,b,d)};jQuery.fn.jplist.controls.GoogleMapsControl.MapView.prototype.showStore=function(a,b,g){var h;d(this);for(var k=0;k<this.stores.length;k++)if(h=this.stores[k],h.latitude===
-a&&h.longitude===b){c(this,a,b,g);this.userSettings.openInfoWindowOnStoreClick&&h.openStorePopup();break}};jQuery.fn.jplist.controls.GoogleMapsControl.MapView.prototype.setStores=function(a){b(this,a)}})();(function(){var b=function(c){c.$storesPanel.on("click",c.storePath,function(){var b=jQuery(this);c.$storesPanel.find(c.storePath).removeClass("jplist-active-store");b.addClass("jplist-active-store");c.observer.trigger("jplist.map.store.clicked",[Number(b.attr("data-latitude")),Number(b.attr("data-longitude"))])})};jQuery.fn.jplist.controls.GoogleMapsControl.StoresView=function(c,d,a,g){this.userSettings=c;this.observer=d;this.$storesPanel=a;this.storePath=g;b(this)}})();(function(){var b=function(c,b){var a;a=c.$store.find('[data-type="'+b+'"]');return 0<a.length?a.text():null};jQuery.fn.jplist.controls.GoogleMapsControl.StoreModel=function(c){this.marker=null;this.$store=c;this.latitude=Number(this.$store.attr("data-latitude"))||0;this.longitude=Number(this.$store.attr("data-longitude"))||0;this.html=c.html();this.title=b(this,"title");this.address=b(this,"address");this.city=b(this,"city");this.state=b(this,"state");this.zipcode=b(this,"zipcode");this.country=
-b(this,"country")};jQuery.fn.jplist.controls.GoogleMapsControl.StoreModel.prototype.openStorePopup=function(){this.marker&&this.marker.openPopup()};jQuery.fn.jplist.controls.GoogleMapsControl.StoreModel.prototype.closeStorePopup=function(){this.marker&&this.marker.closePopup()};jQuery.fn.jplist.controls.GoogleMapsControl.StoreModel.prototype.remove=function(){this.marker&&this.marker.remove()}})();(function(){var b=function(c){window.google.maps.event.addListener(c.gmarker,"click",function(b){c.observer.trigger("jplist.map.marker.clicked");c.gmarker.infowindow.open(c.map,c.gmarker)})};jQuery.fn.jplist.controls.GoogleMapsControl.MarkerModel=function(c,d,a,g,e,f){this.position=new window.google.maps.LatLng(a,d);this.map=g;this.observer=c;this.title=e;this.gmarker=new window.google.maps.Marker({position:this.position,map:this.map,title:this.title});this.gmarker.infowindow=new window.google.maps.InfoWindow;
-this.gmarker.infowindow.setContent(f);b(this)};jQuery.fn.jplist.controls.GoogleMapsControl.MarkerModel.prototype.openPopup=function(){window.google.maps.event.trigger(this.gmarker,"click")};jQuery.fn.jplist.controls.GoogleMapsControl.MarkerModel.prototype.closePopup=function(){this.gmarker&&this.gmarker.infowindow&&this.gmarker.infowindow.close()};jQuery.fn.jplist.controls.GoogleMapsControl.MarkerModel.prototype.remove=function(){this.gmarker.setMap(null)}})();(function(){jQuery.fn.jplist.FiltersService=jQuery.fn.jplist.FiltersService||{};jQuery.fn.jplist.FiltersService.autocompleteFilter=function(b,c,d,a,g){var e=[],f,l;if(jQuery.isNumeric(b)&&jQuery.isNumeric(c)&&window.google){b=new google.maps.LatLng(b,c);for(var h=0;h<a.length;h++)c=a[h],f=new jQuery.fn.jplist.controls.GoogleMapsControl.StoreModel(c.jqElement),l=f.country?jQuery.trim(f.country.toLowerCase())==jQuery.trim(d.toLowerCase()):!1,f=new google.maps.LatLng(f.latitude,f.longitude),f=window.google.maps.geometry.spherical.computeDistanceBetween(b,
-f),(f<=g||l)&&e.push(c);return e}return a}})();(function(){jQuery.fn.jplist.DTOMapperService=jQuery.fn.jplist.DTOMapperService||{};jQuery.fn.jplist.DTOMapperService.filters=jQuery.fn.jplist.DTOMapperService.filters||{};jQuery.fn.jplist.DTOMapperService.filters.AutocompleteFilter=function(b,c){return jQuery.fn.jplist.FiltersService.autocompleteFilter(b.data.latitude,b.data.longitude,b.data.name,c,b.data.radius)}})();(function(){var b=function(a){a.params.handler&&window.google.maps.event.removeListener(a.params.handler);a.params.handler=window.google.maps.event.addListener(a.params.autocomplete,"place_changed",function(){var b;a.params.place=a.params.autocomplete.getPlace();b=c(a,!1);a.history.addStatus(b);a.observer.trigger(a.observer.events.knownStatusesChanged,[[b]])})},c=function(a,c){var b=null;a.params.place&&(b=new jQuery.fn.jplist.controls.AutocompleteDTO(a.params.place.geometry.location.lat(),a.params.place.geometry.location.lng(),
-a.params.place.name,a.params.radius),b=new jQuery.fn.jplist.StatusDTO(a.name,a.action,a.type,b,a.inStorage,a.inAnimation,a.isAnimateToTop,a.inDeepLinking));return b},d=function(a){a.params={autocomplete:null,place:null,zoom:Number(a.$control.attr("data-zoom"))||17,radius:a.$control.attr("data-radius")};window.google&&window.google.maps&&window.google.maps.event.addDomListener(window,"load",function(){a.params.autocomplete=new window.google.maps.places.Autocomplete(a.$control.get(0));b(a)});return jQuery.extend(this,
-a)};d.prototype.getStatus=function(a){return c(this,a)};jQuery.fn.jplist.controls.GoogleAutocompleteControl=function(a){return new d(a)};jQuery.fn.jplist.controlTypes["google-autocomplete-control"]={className:"GoogleAutocompleteControl",options:{}}})();(function(){jQuery.fn.jplist.controls.AutocompleteDTO=function(b,c,d,a){return{latitude:b,longitude:c,name:d,radius:a,filterType:"AutocompleteFilter"}}})();
+(function(){var d=function(b,a){for(var e,f=[],c=0;c<a.length;c++)e=a[c],e=new jQuery.fn.jplist.controls.GoogleMapsControl.StoreModel(e.$item),f.push(e);b.params.mapView.setStores(f)},c=function(b){b.observer.on(b.observer.events.collectionReadyEvent,function(a,e){b.params.dataitems=e.dataitems;d(b,b.params.dataitems)});b.observer.on(b.observer.events.statusesAppliedToList,function(a,e){b.params.dataview=e.dataview;d(b,b.params.dataview)});b.observer.on("jplist.map.store.clicked",function(a,e,f){b.params.mapView.showStore(e,
+f,b.params.userSettings.storeZoom)})},g=function(b){b.params={userSettings:{},mapView:null,storesView:null,dataitems:[],dataview:[]};var a=b.params,e;e={latitude:Number(b.$control.attr("data-latitude"))||0,longitude:Number(b.$control.attr("data-longitude"))||0,initialZoom:Number(b.$control.attr("data-initil-zoom"))||2,mapTypeId:b.$control.attr("data-map-type")||"ROADMAP",storeZoom:Number(b.$control.attr("data-store-zoom"))||17,geolocation:"true"===b.$control.attr("data-geolocation"),openInfoWindowOnStoreClick:b.$control.attr("data-open-popup-store-click")||
+!1,customMarkerIcon:b.$control.attr("data-marker-icon"),markerText:b.$control.attr("data-marker-text")||"Click to Zoom"};a.userSettings=e;b.params.mapView=new jQuery.fn.jplist.controls.GoogleMapsControl.MapView(b.params.userSettings,b.observer,b.$control);b.params.storesView=new jQuery.fn.jplist.controls.GoogleMapsControl.StoresView(b.params.userSettings,b.observer,b.$root.find(b.options.itemsBox),b.options.itemPath);c(b);return jQuery.extend(this,b)};jQuery.fn.jplist.controls.GoogleMapsControl=function(b){return new g(b)};
+jQuery.fn.jplist.controlTypes["google-maps-control"]={className:"GoogleMapsControl",options:{}}})();(function(){var d=function(e,a){for(var b,c=0;c<e.stores.length;c++)b=e.stores[c],b.remove();e.stores=[];e.stores=a;if(e.mapCanvas)for(b=0;b<a.length;b++)c=a[b],c.marker=new jQuery.fn.jplist.controls.GoogleMapsControl.MarkerModel(e.observer,c.longitude,c.latitude,e.mapCanvas,e.userSettings.markerText,c.html)},c=function(b,a,c,d){a=new google.maps.LatLng(a,c);b.mapCanvas.setCenter(a);b.mapCanvas.setZoom(d)},g=function(b){for(var a=0;a<b.stores.length;a++)b.stores[a].closeStorePopup()},b=function(b){b.userSettings.geolocation&&
+navigator.geolocation&&navigator.geolocation.getCurrentPosition(function(a){c(b,a.coords.latitude,a.coords.longitude,b.userSettings.storeZoom)})},a=function(a){window.google&&window.google.maps&&window.google.maps.event.addDomListener(window,"load",function(){var c;c=new google.maps.LatLng(a.userSettings.latitude,a.userSettings.longitude);a.mapCanvas=new window.google.maps.Map(a.$map.get(0),{mapTypeId:google.maps.MapTypeId[a.userSettings.mapTypeId],center:c,zoom:a.userSettings.initialZoom});d(a,a.stores);
+b(a)});a.observer.on("jplist.map.marker.clicked",function(b,c,d){g(a)})};jQuery.fn.jplist.controls.GoogleMapsControl.MapView=function(b,c,d){this.userSettings=b;this.$map=d;this.observer=c;this.mapCanvas=null;this.stores=[];a(this)};jQuery.fn.jplist.controls.GoogleMapsControl.MapView.prototype.showLocation=function(a,b,d){c(this,a,b,d)};jQuery.fn.jplist.controls.GoogleMapsControl.MapView.prototype.showStore=function(a,b,d){var h;g(this);for(var k=0;k<this.stores.length;k++)if(h=this.stores[k],h.latitude===
+a&&h.longitude===b){c(this,a,b,d);this.userSettings.openInfoWindowOnStoreClick&&h.openStorePopup();break}};jQuery.fn.jplist.controls.GoogleMapsControl.MapView.prototype.setStores=function(a){d(this,a)}})();(function(){var d=function(c){c.$storesPanel.on("click",c.storePath,function(){var d=jQuery(this);c.$storesPanel.find(c.storePath).removeClass("jplist-active-store");d.addClass("jplist-active-store");c.observer.trigger("jplist.map.store.clicked",[Number(d.attr("data-latitude")),Number(d.attr("data-longitude"))])})};jQuery.fn.jplist.controls.GoogleMapsControl.StoresView=function(c,g,b,a){this.userSettings=c;this.observer=g;this.$storesPanel=b;this.storePath=a;d(this)}})();(function(){var d=function(c,d){var b;b=c.$store.find('[data-type="'+d+'"]');return 0<b.length?b.text():null};jQuery.fn.jplist.controls.GoogleMapsControl.StoreModel=function(c){this.marker=null;this.$store=c;this.latitude=Number(this.$store.attr("data-latitude"))||0;this.longitude=Number(this.$store.attr("data-longitude"))||0;this.html=c.html();this.title=d(this,"title");this.address=d(this,"address");this.city=d(this,"city");this.state=d(this,"state");this.zipcode=d(this,"zipcode");this.country=
+d(this,"country")};jQuery.fn.jplist.controls.GoogleMapsControl.StoreModel.prototype.openStorePopup=function(){this.marker&&this.marker.openPopup()};jQuery.fn.jplist.controls.GoogleMapsControl.StoreModel.prototype.closeStorePopup=function(){this.marker&&this.marker.closePopup()};jQuery.fn.jplist.controls.GoogleMapsControl.StoreModel.prototype.remove=function(){this.marker&&this.marker.remove()}})();(function(){var d=function(c){window.google.maps.event.addListener(c.gmarker,"click",function(d){c.observer.trigger("jplist.map.marker.clicked");c.gmarker.infowindow.open(c.map,c.gmarker)})};jQuery.fn.jplist.controls.GoogleMapsControl.MarkerModel=function(c,g,b,a,e,f){this.position=new window.google.maps.LatLng(b,g);this.map=a;this.observer=c;this.title=e;this.gmarker=new window.google.maps.Marker({position:this.position,map:this.map,title:this.title});this.gmarker.infowindow=new window.google.maps.InfoWindow;
+this.gmarker.infowindow.setContent(f);d(this)};jQuery.fn.jplist.controls.GoogleMapsControl.MarkerModel.prototype.openPopup=function(){window.google.maps.event.trigger(this.gmarker,"click")};jQuery.fn.jplist.controls.GoogleMapsControl.MarkerModel.prototype.closePopup=function(){this.gmarker&&this.gmarker.infowindow&&this.gmarker.infowindow.close()};jQuery.fn.jplist.controls.GoogleMapsControl.MarkerModel.prototype.remove=function(){this.gmarker.setMap(null)}})();(function(){jQuery.fn.jplist.FiltersService=jQuery.fn.jplist.FiltersService||{};jQuery.fn.jplist.FiltersService.autocompleteFilter=function(d,c,g,b,a){var e=[],f,l;if(jQuery.isNumeric(d)&&jQuery.isNumeric(c)&&window.google&&0<a){d=new google.maps.LatLng(d,c);for(var h=0;h<b.length;h++)c=b[h],f=new jQuery.fn.jplist.controls.GoogleMapsControl.StoreModel(c.jqElement),l=f.country?jQuery.trim(f.country.toLowerCase())==jQuery.trim(g.toLowerCase()):!1,f=new google.maps.LatLng(f.latitude,f.longitude),f=window.google.maps.geometry.spherical.computeDistanceBetween(d,
+f),(f<=a||l)&&e.push(c);return e}return b}})();(function(){jQuery.fn.jplist.DTOMapperService=jQuery.fn.jplist.DTOMapperService||{};jQuery.fn.jplist.DTOMapperService.filters=jQuery.fn.jplist.DTOMapperService.filters||{};jQuery.fn.jplist.DTOMapperService.filters.AutocompleteFilter=function(d,c){return jQuery.fn.jplist.FiltersService.autocompleteFilter(d.data.latitude,d.data.longitude,d.data.name,c,d.data.radius)}})();(function(){var d=function(a){var b=g(a,!1);a.history.addStatus(b);a.observer.trigger(a.observer.events.knownStatusesChanged,[[b]])},c=function(a){a.params.handler&&window.google.maps.event.removeListener(a.params.handler);a.params.handler=window.google.maps.event.addListener(a.params.autocomplete,"place_changed",function(){a.params.place=a.params.autocomplete.getPlace();d(a)});a.$control.next('[data-type="clear"]').off("click").on("click",function(){a.$control.val("");a.params.place=null;d(a)});
+a.$control.off("keyup").on("keyup",function(b){""===jQuery.trim(jQuery(this).val())&&(a.params.place=null,d(a))})},g=function(a,b){var c=null,c=b||!a.params.place?new jQuery.fn.jplist.controls.AutocompleteDTO(0,0,"",0):new jQuery.fn.jplist.controls.AutocompleteDTO(a.params.place.geometry.location.lat(),a.params.place.geometry.location.lng(),a.params.place.name,a.params.radius);return c=new jQuery.fn.jplist.StatusDTO(a.name,a.action,a.type,c,a.inStorage,a.inAnimation,a.isAnimateToTop,a.inDeepLinking)},
+b=function(a){a.params={autocomplete:null,place:null,zoom:Number(a.$control.attr("data-zoom"))||17,radius:a.$control.attr("data-radius")};window.google&&window.google.maps&&window.google.maps.event.addDomListener(window,"load",function(){a.params.autocomplete=new window.google.maps.places.Autocomplete(a.$control.get(0));c(a)});return jQuery.extend(this,a)};b.prototype.getStatus=function(a){return g(this,a)};jQuery.fn.jplist.controls.GoogleAutocompleteControl=function(a){return new b(a)};jQuery.fn.jplist.controlTypes["google-autocomplete-control"]=
+{className:"GoogleAutocompleteControl",options:{}}})();(function(){jQuery.fn.jplist.controls.AutocompleteDTO=function(d,c,g,b){return{latitude:d,longitude:c,name:g,radius:b,filterType:"AutocompleteFilter"}}})();
diff --git a/src/addons/store-locator-bundle/css/styles.less b/src/addons/store-locator-bundle/css/styles.less
index 5f090d8..215a6d9 100644
--- a/src/addons/store-locator-bundle/css/styles.less
+++ b/src/addons/store-locator-bundle/css/styles.less
@@ -112,6 +112,17 @@
       height: 30px;
       float: left;
       margin: 10px 10px 0 0;
+
+      .jplist-icon{
+        background: @light-blue1;
+        font-size: 15px;
+        border-radius: 3px 0 0 3px;
+      }
+
+      input[type="text"]{
+        border-right: 0;
+        border-radius: 0;
+      }
     }
   }
 }
diff --git a/src/addons/store-locator-bundle/js/autocomplete-control/autocomplete-view.js b/src/addons/store-locator-bundle/js/autocomplete-control/autocomplete-view.js
index 9f485bb..80a813a 100644
--- a/src/addons/store-locator-bundle/js/autocomplete-control/autocomplete-view.js
+++ b/src/addons/store-locator-bundle/js/autocomplete-control/autocomplete-view.js
@@ -2,24 +2,30 @@
     'use strict';
 
     /**
-     * handle place change
+     * send jPList redraw event
      * @param {Object} context
      */
-    var handlePlaceChange = function(context){
-
-        var place
-            ,status;
-
-        //get selected place
-        context.params.place = context.params.autocomplete.getPlace();
+    var sendEvent = function(context){
 
-        status = getStatus(context, false);
+        var status = getStatus(context, false);
 
         //update last status
         context.history.addStatus(status);
 
         context.observer.trigger(context.observer.events.knownStatusesChanged, [[status]]);
+    };
+
+    /**
+     * handle place change
+     * @param {Object} context
+     */
+    var handlePlaceChange = function(context){
+
+        //get selected place
+        context.params.place = context.params.autocomplete.getPlace();
 
+        //send jPList redraw event
+        sendEvent(context);
     };
 
     /**
@@ -41,22 +47,36 @@
             handlePlaceChange(context);
         });
 
-        /*
+        /**
+         * on autocomplete textbox clear
+         */
+        context.$control.next('[data-type="clear"]').off('click').on('click', function(){
+
+            context.$control.val('');
+            context.params.place = null;
+
+            //send jPList redraw event
+            sendEvent(context);
+        });
+
+        /**
+         * on empty textbox
+         */
         context.$control.off('keyup').on('keyup', function(e){
 
             var val;
 
             //get val
-            val = $.trim($(this).val());
+            val = jQuery.trim(jQuery(this).val());
 
             if(val === ''){
 
                 context.params.place = null;
 
-                //send panel redraw event
-                control.$jplistBox.trigger(control.options.force_ask_event, [false]);
+                //send jPList redraw event
+                sendEvent(context);
             }
-        });*/
+        });
     };
 
     /**
@@ -70,42 +90,31 @@
         var status = null
             ,data;
 
-        /*
-        if(isDefault){
+        if(isDefault || !(context.params.place)){
 
-            status = new jQuery.fn.jplist.controls.AutocompleteDTO(
-                context.params.latitude
-                ,context.params.longitude
-                ,context.params.name
-                ,context.params.radius);
+            data = new jQuery.fn.jplist.controls.AutocompleteDTO(0 ,0 ,'', 0);
         }
         else{
-            status = new jQuery.fn.jplist.controls.AutocompleteDTO(latitude, longitude, name, radius);
-        }
-        */
-
-        if(context.params.place) {
-
             data = new jQuery.fn.jplist.controls.AutocompleteDTO(
                 context.params.place.geometry.location['lat']()
                 ,context.params.place.geometry.location['lng']()
                 ,context.params.place.name
                 ,context.params.radius
             );
-
-            //create status object
-            status = new jQuery.fn.jplist.StatusDTO(
-                context.name
-                ,context.action
-                ,context.type
-                ,data
-                ,context.inStorage
-                ,context.inAnimation
-                ,context.isAnimateToTop
-                ,context.inDeepLinking
-            );
         }
 
+        //create status object
+        status = new jQuery.fn.jplist.StatusDTO(
+            context.name
+            ,context.action
+            ,context.type
+            ,data
+            ,context.inStorage
+            ,context.inAnimation
+            ,context.isAnimateToTop
+            ,context.inDeepLinking
+        );
+
         return status;
     };
 
@@ -122,9 +131,6 @@
             ,place: null
 
             ,zoom: Number(context.$control.attr('data-zoom')) || 17
-            //,latitude: Number(context.$control.attr('data-latitude')) || 0
-            //,longitude: Number(context.$control.attr('data-longitude')) || 0
-            //,name: context.$control.attr('data-name')
             ,radius: context.$control.attr('data-radius')
         };
 
diff --git a/src/addons/store-locator-bundle/js/autocomplete-control/dom-filters-addon.js b/src/addons/store-locator-bundle/js/autocomplete-control/dom-filters-addon.js
index 1c33f30..c01029f 100644
--- a/src/addons/store-locator-bundle/js/autocomplete-control/dom-filters-addon.js
+++ b/src/addons/store-locator-bundle/js/autocomplete-control/dom-filters-addon.js
@@ -25,7 +25,8 @@
 
         if(jQuery.isNumeric(latitude)
             && jQuery.isNumeric(longitude)
-            && window.google){
+            && window.google
+            && radius > 0){
 
             //init latlng
             latlng = new google['maps']['LatLng'](latitude, longitude);
diff --git a/src/addons/store-locator-bundle/js/config.json b/src/addons/store-locator-bundle/js/config.json
index dfbaa8a..9807d56 100644
--- a/src/addons/store-locator-bundle/js/config.json
+++ b/src/addons/store-locator-bundle/js/config.json
@@ -15,5 +15,5 @@
 		"build/closure/google-closure-compiler/externs/jquery-1.7.externs.js",
 		"build/closure/google-closure-compiler/externs/jplist.addons.externs.js"
 	],
-	"version": 12
+	"version": 18
 }
\ No newline at end of file
diff --git a/src/core/css/styles.less b/src/core/css/styles.less
index ae3c446..673f418 100644
--- a/src/core/css/styles.less
+++ b/src/core/css/styles.less
@@ -131,6 +131,26 @@
 		margin: 10px 10px 0 0;	
 		.linear-gradient(#fff, #fff, @light-grey4); //bgcolor, from, to
 	}
+
+    .jplist-clear{
+      color: #666;
+      cursor: pointer;
+      float: left;
+      height: 30px;
+      line-height: 27px;
+      padding: 0 4px;
+      background: #fff;
+
+      .border-box-mixin();
+      border: 1px solid @light-grey5;
+      border-left: 0;
+      border-radius: 0 3px 3px 0;
+      text-shadow: 1px 1px 1px #fff;
+    }
+
+    .jplist-clear:hover{
+      color: #444;
+    }
 	
 	.jplist-selected{
 		color: @red1;