[Maposmatic-dev] [PATCH 24/24] Improve suggest box behavior and usability

[Maxime Petazzoni]

---
 www/media/osm_map.js |   26 ++++++++++++++++++--------
 www/media/style.css  |    5 +++--
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/www/media/osm_map.js b/www/media/osm_map.js
index bdc5cc6..6ee81ca 100644
--- a/www/media/osm_map.js
+++ b/www/media/osm_map.js
@@ -140,6 +140,7 @@ function suggest(input, results, osm_id, button, options) {
   var $osm_id = $(osm_id);
   var $button = $(button);
   var timeout = false;
+  var shown = false;
 
   closeSuggest();
 
@@ -163,6 +164,7 @@ function suggest(input, results, osm_id, button, options) {
   function closeSuggest() {
     $results.empty();
     $results.hide();
+    shown = false;
   }
 
   /* Handle the JSON result. */
@@ -171,8 +173,10 @@ function suggest(input, results, osm_id, button, options) {
     $(input).css('cursor', 'text');
     closeSuggest();
 
-    if (data.length)
+    if (data.length) {
       $results.show();
+      shown = true;
+    }
 
     $.each(data, function(i, item) {
       if (typeof item.ocitysmap_params != 'undefined' &&
@@ -189,6 +193,13 @@ function suggest(input, results, osm_id, button, options) {
       $results.append('<li class="info">' + $('#noadminlimitinfo').html() + 
'</li>');
   }
 
+  function doQuery() {
+    if (!$input.val().length)
+      return;
+    $(input).css('cursor', 'wait');
+    $.getJSON("/nominatim/", { q: $input.val() }, handleNominatimResults);
+  }
+
   function processKey(e) {
     clearResult();
 
@@ -204,20 +215,19 @@ function suggest(input, results, osm_id, button, options) 
{
         return false;
         break;
       case 38:  // UP
+        if (!shown)
+          doQuery();
         prevResult();
         break;
       case 40:  // DOWN
+        if (!shown)
+          doQuery();
         nextResult();
         break;
       default:
-        if (timeout) {
+        if (timeout)
           clearTimeout(timeout);
-        }
-        timeout = setTimeout(function() {
-          $(input).css('cursor', 'wait');
-          $.getJSON("/nominatim/", {q: $input.val()},
-            handleNominatimResults);
-          }, options.timeout);
+        timeout = setTimeout(doQuery, options.timeout);
       }
   }
 
diff --git a/www/media/style.css b/www/media/style.css
index 5770220..557a947 100644
--- a/www/media/style.css
+++ b/www/media/style.css
@@ -341,6 +341,7 @@ a.selectedletter {
 
 #suggest li {
   padding: 1px;
+  display: block;
 }
 
 #suggest li.selected {
@@ -353,11 +354,11 @@ a.selectedletter {
 }
 
 #suggest li.suggestoff {
-  color: #ccc;
+  color: #bbb;
 }
 
 #suggest li.suggestoff:hover {
-  background: #f0f0f0;
+  background: #eee;
   cursor: help;
 }
 
-- 
1.6.3.3.261.g85c6