now distinguishing between suggestlist and result

reworked layout

src/main/webapp/css_new/geosearch.css

-.leaflet-control-geosearch, .leaflet-control-geosearch ul {
+.leaflet-control-geosearch-msg ul {
+	background-color: transparent;
+	list-style: none;
+	display: none;
+	height: auto;
+	margin: 0px;
+	padding: 0px;
+	width: 400px;
+}
+
+.leaflet-control-geosearch-msg ul li {
+	background-color: #FFFFFF;
+    font: 12px arial;
+    text-indent: 4px;
+    padding: 4px;
+}
+
+.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-result {
+    margin-top: 5px;
+}
+
+.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-result li {
+	border: 1px solid #000000;
+}
+
+.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-suggests li {
+	border: 1px solid #bbbbbb;
+}
+
+.leaflet-control-geosearch-msg ul li:hover {
+	background-color: #eeeeee;
+}
+
+.leaflet-control-geosearch-searchdiv {
 	background: none repeat scroll 0 0 #FFFFFF;
     border-radius: 5px 0px 0px 5px;
 	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.65);
-	margin: 10px 0 0 0;
 	padding: 5px;
 	width: 390px;
 	height: auto;
 }
 
-.leaflet-control-geosearch-msg ul {
-	list-style: none;
-	display: none;
-	height: auto;
-	background: none;
+.leaflet-control-geosearch-searchdiv input {
+	width: 100%;
+	height: 28px;
 	padding: 0px;
+	text-indent: 8px;
+	border: none;
 }
 
 .leaflet-control-geosearch-btn {
@@ -30,18 +62,3 @@
     width: 72px;
 }
 
-.leaflet-control-geosearch ul li {
-    border-radius: 4px;
-    margin: 2px 0px;
-    padding: 4px;
-    font: 12px arial;
-    text-indent: 4px;
-}
-
-.leaflet-container .leaflet-control-geosearch input {
-	width: 100%;
-	height: 28px;
-	padding: 0px;
-	text-indent: 8px;
-	border: none;
-}

src/main/webapp/js_new/geosearch.js

@@ -66,7 +66,12 @@ L.Control.GeoSearch = L.Control.extend({
 
         this._map = map;
         this._container = L.DomUtil.create('div', 'leaflet-control-geosearch');
-        this._resultSet = [];
+        this._suggestSet = [];
+
+        var searchdiv = document.createElement('div');
+        searchdiv.id = 'leaflet-control-geosearch-searchdiv';
+        searchdiv.className = 'leaflet-control-geosearch-searchdiv';
+        this._searchdiv = searchdiv;
 
         var searchbox = document.createElement('input');
         searchbox.id = 'leaflet-control-geosearch-qry';
@@ -84,13 +89,21 @@ L.Control.GeoSearch = L.Control.extend({
         msgbox.className = 'leaflet-control-geosearch-msg';
         this._msgbox = msgbox;
 
-        var resultslist = document.createElement('ul');
-        resultslist.id = 'leaflet-control-geosearch-results';
-        this._resultslist = resultslist;
-
-        this._msgbox.appendChild(this._resultslist);
-        this._container.appendChild(this._searchbtn);
-        this._container.appendChild(this._searchbox);
+        var result = document.createElement('ul');
+        result.id = 'leaflet-control-geosearch-result';
+        result.className = 'leaflet-control-geosearch-result';
+        this._result = result;
+
+        var suggestlist = document.createElement('ul');
+        suggestlist.id = 'leaflet-control-geosearch-suggests';
+        suggestlist.className = 'leaflet-control-geosearch-suggests';
+        this._suggestlist = suggestlist;
+
+        this._msgbox.appendChild(this._suggestlist);
+        this._msgbox.appendChild(this._result);
+        this._searchdiv.appendChild(this._searchbtn);
+        this._searchdiv.appendChild(this._searchbox);
+        this._container.appendChild(this._searchdiv);
         this._container.appendChild(this._msgbox);
 
         L.DomEvent
@@ -188,21 +201,32 @@ L.Control.GeoSearch = L.Control.extend({
         return addressStr;
     },
 
-    _clearResultList : function() {
-        this._resultSet = [];
+    _clearResult : function() {
         if (this._timeout != null) {
             clearTimeout(this._timeout);
             this._timeout = null;
         }
 
-        var elem = this._resultslist;
+        var elem = this._result;
         elem.innerHTML = '';
         elem.style.display = 'none';
     },
 
-    _isInResultSet : function(o) {
+    _clearSuggestList : function() {
+        this._suggestSet = [];
+        if (this._timeout != null) {
+            clearTimeout(this._timeout);
+            this._timeout = null;
+        }
+
+        var elem = this._suggestlist;
+        elem.innerHTML = '';
+        elem.style.display = 'none';
+    },
+
+    _isInSuggestSet : function(o) {
         var i = 0,
-            set = this._resultSet;
+            set = this._suggestSet;
 
         for (i = 0; i < set.length; ++i) {
             if (set[i].lat == o.lat && set[i].lon == o.lon) {
@@ -242,21 +266,21 @@ L.Control.GeoSearch = L.Control.extend({
         }
     },
 
-    _onResultClick : function (e) {
-        var resultId = e.target.id,
-            resultIndex = -1,
-            result = null;
+    _onSuggestClick : function (e) {
+        var suggestId = e.target.id,
+            suggestIndex = -1,
+            suggest = null;
 
-        if (resultId) {
-            resultIndex = resultId.substring(resultId.lastIndexOf('-') + 1);
+        if (suggestId) {
+        	suggestIndex = suggestId.substring(suggestId.lastIndexOf('-') + 1);
         }
 
-        if (resultIndex >= 0) {
-            result = this._resultSet[resultIndex];
+        if (suggestIndex >= 0) {
+        	suggest = this._suggestSet[suggestIndex];
         }
 
-        if (result) {
-            this._showLocation(result);
+        if (suggest) {
+            this._showLocation(suggest);
         }
     },
 
@@ -287,7 +311,7 @@ L.Control.GeoSearch = L.Control.extend({
             this._showLocation(results[0]);
         } else {
             // multiple results found... add to results list and let user choose which one to show
-             this._setResultList(results);
+            this._setSuggestList(results);
         }
     },
 
@@ -297,18 +321,38 @@ L.Control.GeoSearch = L.Control.extend({
         }
 
         this._map.fireEvent('geosearch_clicklocation', {Location: result});
-        this._setResultList([result]);
+        this._setResult(result);
     },
 
-    _setResultList: function(results) {
-        var elem = this._resultslist,
+    _setResult: function(result) {
+        var elem = this._result,
+	        li = null,
+	        liText = null;
+
+        if (result.lat == undefined || result.lon == undefined) {
+            return;
+        }
+
+        this._clearResult();
+        li = document.createElement('li');
+        li.id = 'geosearch-result';
+        li.className = 'geosearch-result';
+        liText = document.createTextNode(result.displayName);
+        li.appendChild(liText);
+        elem.appendChild(li);
+
+	    elem.style.display = 'block';
+    },
+
+	_setSuggestList: function(results) {
+        var elem = this._suggestlist,
             i = 0,
             j = 0,
             li = null,
             liText = null,
             r = null;
 
-        this._clearResultList();
+        this._clearSuggestList();
 
         for (i = 0, j = 0; i < results.length; ++i) {
             r = results[i];
@@ -316,18 +360,18 @@ L.Control.GeoSearch = L.Control.extend({
                 continue;
             }
 
-            if (this._isInResultSet(r)) {
+            if (this._isInSuggestSet(r)) {
                 continue;
             }
 
-            this._resultSet[this._resultSet.length] = r;
+            this._suggestSet[this._suggestSet.length] = r;
             li = document.createElement('li');
-            li.id = 'geosearch-result-' + j;
-            li.className = 'geosearch-result';
+            li.id = 'geosearch-suggest-' + j;
+            li.className = 'geosearch-suggest';
             liText = document.createTextNode(r.displayName);
             li.appendChild(liText);
             elem.appendChild(li);
-            L.DomEvent.addListener(li, 'click', this._onResultClick, this);
+            L.DomEvent.addListener(li, 'click', this._onSuggestClick, this);
 
             ++j;
         }
@@ -336,6 +380,9 @@ L.Control.GeoSearch = L.Control.extend({
     },
 
     _showLocation: function (location) {
+    	this._setResult(location);
+    	this._clearSuggestList();
+
         if (this.options.showMarker == true) {
             if (typeof this._positionMarker === 'undefined') {
                 this._positionMarker = L.marker([location.lat, location.lon]).addTo(this._map);
@@ -349,7 +396,7 @@ L.Control.GeoSearch = L.Control.extend({
     },
 
     _printError: function(message) {
-        var elem = this._resultslist;
+        var elem = this._result;
         elem.innerHTML = '<li>' + message + '</li>';
         elem.style.display = 'block';