From 8a8a29013ed77dff22e53c5dbeeee8ed7dbc5ec2 Mon Sep 17 00:00:00 2001
From: Ian B <porjo38@yahoo.com.au>
Date: Sat, 9 Feb 2013 15:22:02 +0100
Subject: [PATCH] Search results area

Display multiple search results
---
 css/app.css          | 15 ++++++++++++++
 js/id/ui/geocoder.js | 47 +++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/css/app.css b/css/app.css
index 99904d953..35f7c3821 100644
--- a/css/app.css
+++ b/css/app.css
@@ -848,6 +848,21 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     margin: 4px;
 }
 
+.geocode-control div {
+    top: 50px;
+    width: 340px;
+    margin: 4px;
+    padding: 5px;
+}
+.geocode-control div span {
+    display: inline-block;
+    border-bottom: 1px solid #333;
+}
+
+.geocode-control div span:hover {
+    background-color: #333;
+}
+
 /* Geolocator */
 
 .geolocate-control {
diff --git a/js/id/ui/geocoder.js b/js/id/ui/geocoder.js
index 8883dc934..52fcb1672 100644
--- a/js/id/ui/geocoder.js
+++ b/js/id/ui/geocoder.js
@@ -8,21 +8,54 @@ iD.ui.geocoder = function() {
             d3.event.preventDefault();
             var searchVal = this.value;
             d3.json('http://nominatim.openstreetmap.org/search/' +
-                encodeURIComponent(searchVal) + '?limit=10&format=json', function(err, resp) {
+                encodeURIComponent(searchVal) + '?limit=10&format=json', function (err, resp) {
                 if (err) return hide();
-                hide();
                 if (!resp.length) {
                     return iD.ui.flash(context.container())
                         .select('.content')
                         .append('h3')
                         .text('No location found for "' + searchVal + '"');
                 }
-                var bounds = resp[0].boundingbox;
-                map.extent(iD.geo.Extent([parseFloat(bounds[3]), parseFloat(bounds[0])], [parseFloat(bounds[2]), parseFloat(bounds[1])]));
-                if (map.zoom() > 19) map.zoom(19);
+                if(resp.length > 1) {
+                    for (var i=0; i < resp.length; i++) {
+                        var displayName, elementType, typeStr, span;
+                        displayName = resp[i].display_name,
+                        elementType = resp[i].type,
+                        typeStr = elementType.charAt(0).toUpperCase() + elementType.slice(1) + ': ',
+                        span = resultsList.append('span').text(typeStr);
+                        if(displayName.length > 80) displayName = displayName.substr(0,80) + '...';
+                        span.append('a')
+                            .attr('data-min-lon',resp[i].boundingbox[3])
+                            .attr('data-min-lat',resp[i].boundingbox[0])
+                            .attr('data-max-lon',resp[i].boundingbox[2])
+                            .attr('data-max-lat',resp[i].boundingbox[1])
+                            .text(displayName)
+                            .on('click', clickResult);
+                    }
+                    resultsList.classed('hide',false); 
+                } else {
+                    var bounds = resp[0].boundingbox;
+                    var extent = iD.geo.Extent([parseFloat(bounds[3]), parseFloat(bounds[0])], [parseFloat(bounds[2]), parseFloat(bounds[1])]);
+                    applyBounds(extent);
+                }
             });
         }
 
+        function clickResult() {
+            var result = d3.select(this);
+            var extent = iD.geo.Extent( 
+                [parseFloat(result.attr('data-min-lon')),  parseFloat(result.attr('data-min-lat'))], 
+                [parseFloat(result.attr('data-max-lon')),  parseFloat(result.attr('data-max-lat'))] 
+            );
+            applyBounds(extent);
+        }
+
+        function applyBounds(extent) {
+            hide();
+            map.extent(extent);
+            if (map.zoom() > 19) map.zoom(19);
+        }
+
         function clickoutside(selection) {
             selection
                 .on('click.geocoder-inside', function() {
@@ -38,6 +71,7 @@ iD.ui.geocoder = function() {
         function setVisible(show) {
             button.classed('active', show);
             gcForm.classed('hide', !show);
+            if (!show) resultsList.classed('hide', !show);
             if (show) inputNode.node().focus();
             else inputNode.node().blur();
         }
@@ -55,6 +89,9 @@ iD.ui.geocoder = function() {
                 .attr({ type: 'text', placeholder: t('geocoder.find_a_place') })
                 .on('keydown', keydown);
 
+        var resultsList = selection.append('div')
+            .attr('class','content fillD map-overlay hide');
+
         selection.call(clickoutside);
     }