Unify the four field-level pickers, fix search visibility

menu_items/parent_search/move_to_search/event_search each duplicated
their own debounce-free AJAX call and result rendering. Replaced with
one shared initSearchPicker, taking each picker's distinctive
behavior (parent_search's live path preview, event_search's title
hint) as a callback rather than a whole reimplementation. Adds a real
debounce with an out-of-order-response guard -- none of the four had
either before. admin_search (the Alt+F top-bar search) now shares the
same function via its own url/isActive/header options, gaining the
same guard and fixing an inconsistency of its own (it previously
always slid its panel open, even on zero results).

Each picker's results container gets its own id instead of sharing
was ever supposed to be on screen at once, an assumption with no
actual enforcement behind it. Styling moved from an id-pair
(#menu_search_results, #search_results) to a shared .search_results
class so a future picker never needs this file touched again.

menu_search and the admin top-bar search now call Node.editor_search
instead of the public, head-only Node.search -- both are admin-only,
authenticated views, and had no reason to inherit the public search's
"can't find a draft" limitation. The always-ignored :per_page => 1000
on the latter is gone too; Node.search's second argument was never
read by the method at all.

Also removed a stale #metadata a { text-transform: lowercase } rule,
found while verifying the above -- written for the pre-subnav-removal
expand-toggle, which no longer exists; it had been silently
lowercasing nodes#edit's own, unrelated #metadata div (including
move_to_search's results) by id coincidence ever since. #main_navigation
and #overview_toggle intentionally left capitalized rather than
special-cased -- both belong to the nav bar already slated to shrink
to three icons, not worth polishing on the way out.

10 files changed, 135 insertions, 265 deletions

diff --git a/app/controllers/admin_controller.rb b/app/controllers/admin_controller.rb
index 435df57b..3c45c496 100644
--- a/app/controllers/admin_controller.rb
+++ b/app/controllers/admin_controller.rb
@@ -31,7 +31,7 @@ class AdminController < ApplicationController
   end
 
   def search
-    @results = Node.search params[:search_term], :per_page => 1000
+    @results = Node.editor_search(params[:search_term])
 
     respond_to do |format|
       format.html do
@@ -53,7 +53,7 @@ class AdminController < ApplicationController
     if params[:search_term] == "Root"
       @results = [Node.root]
     else
-      @results = Node.search params[:search_term]
+      @results = Node.editor_search(params[:search_term])
     end
 
     respond_to do |format|
diff --git a/app/views/events/edit.html.erb b/app/views/events/edit.html.erb
index 6cb04bd7..45b084f0 100644
--- a/app/views/events/edit.html.erb
+++ b/app/views/events/edit.html.erb
@@ -19,12 +19,12 @@
           <details>
             <summary>Change node</summary>
             <%= text_field_tag :event_node_search_term %>
-            <div id="search_results"></div>
+            <div id="event_search_results" class="search_results"></div>
             <span class="field_hint">This will re-link the event to a different node — rarely needed.</span>
           </details>
         <% else %>
           <%= text_field_tag :event_node_search_term %>
-          <div id="search_results"></div>
+          <div id="event_search_results" class="search_results"></div>
           <span class="field_hint">Optional — search and pick a node to associate this event with a page.</span>
         <% end %>
         <%= f.hidden_field :node_id %>
diff --git a/app/views/events/new.html.erb b/app/views/events/new.html.erb
index b20fe488..7a1ee7a3 100644
--- a/app/views/events/new.html.erb
+++ b/app/views/events/new.html.erb
@@ -10,7 +10,7 @@
       <div class="node_description">Node</div>
       <div class="node_content">
         <%= text_field_tag :event_node_search_term %>
-        <div id="search_results"></div>
+        <div id="event_search_results" class="search_results"></div>
         <%= f.hidden_field :node_id %>
         <span class="field_hint">Optional — search and pick a node to associate this event with a page.</span>
       </div>
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index e714c281..079346b2 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -56,9 +56,7 @@
           <span>Search: </span><%= text_field_tag :search_term, nil, autocomplete: "off" %>
         <% end %>
       </div>
-      <div id="menu_search_results" style="display: none">
-        
-      </div>
+      <div id="menu_search_results" class="search_results" style="display: none"></div>
     </div>
   </body>
 </html>
diff --git a/app/views/menu_items/edit.html.erb b/app/views/menu_items/edit.html.erb
index dc5e8f97..44e5a791 100644
--- a/app/views/menu_items/edit.html.erb
+++ b/app/views/menu_items/edit.html.erb
@@ -6,7 +6,7 @@
     <div class="node_description">Search</div>
     <div class="node_content">
       <%= text_field_tag :menu_search_term %>
-      <div id="search_results"></div>
+      <div id="menu_item_search_results" class="search_results"></div>
     </div>
 
     <div class="node_description">Node Id</div>
diff --git a/app/views/menu_items/new.html.erb b/app/views/menu_items/new.html.erb
index 68081d0f..223cb8ec 100644
--- a/app/views/menu_items/new.html.erb
+++ b/app/views/menu_items/new.html.erb
@@ -7,9 +7,7 @@
       <td class="description">Search</td>
       <td>
         <%= text_field_tag :menu_search_term %>
-        <div id="search_results">
-
-        </div>
+        <div id="menu_item_search_results" class="search_results"></div>
       </td>
     </tr>
     <tr>
diff --git a/app/views/nodes/edit.html.erb b/app/views/nodes/edit.html.erb
index 1c194101..13b78fca 100644
--- a/app/views/nodes/edit.html.erb
+++ b/app/views/nodes/edit.html.erb
@@ -45,14 +45,12 @@
       <div class="node_description">parent</div>
       <div class="node_content">
         <%= text_field_tag :move_to_search_term, @node.parent.title rescue "" %>
-          <div id="search_results">
-
-          </div>
-          <%= f.hidden_field(
-                :staged_parent_id,
-                :value => @node.staged_parent_id || @node.parent_id
-              )
-           %>
+        <div id="move_to_search_results" class="search_results"></div>
+        <%= f.hidden_field(
+              :staged_parent_id,
+              :value => @node.staged_parent_id || @node.parent_id
+            )
+         %>
       </div>
 
       <%= fields_for @page do |d| %>
diff --git a/app/views/nodes/new.html.erb b/app/views/nodes/new.html.erb
index afc632f9..bb7e078a 100644
--- a/app/views/nodes/new.html.erb
+++ b/app/views/nodes/new.html.erb
@@ -34,7 +34,7 @@
     <div class="node_content">
       <%= text_field_tag :parent_search_term, @parent_name %>
       <%= hidden_field_tag :parent_id, @parent_id %>
-      <div id="search_results"></div>
+      <div id="parent_search_results" class="search_results"></div>
     </div>
   </div>
 
diff --git a/public/javascripts/admin_search.js b/public/javascripts/admin_search.js
index 0e708458..f553334d 100644
--- a/public/javascripts/admin_search.js
+++ b/public/javascripts/admin_search.js
@@ -1,5 +1,4 @@
 admin_search = {
-
   initialize : function() {
     $(document).bind("keydown", 'Alt+f', function(){
       admin_search.display_toggle();
@@ -20,25 +19,12 @@ admin_search = {
       }
     });
 
-    $("#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) {
-            admin_search.show_results(results);
-          },
-          error: function(xhr, status, error) {
-            console.log("Ajax error:", status, error, xhr.status, xhr.responseText);
-          }
-        });
-      } else {
-        $('#menu_search_results').slideUp();
-        $('#menu_search_results').empty();
-      }
+    initSearchPicker({
+      inputSelector: "#search_term",
+      resultsSelector: "#menu_search_results",
+      url: ADMIN_SEARCH_URL,
+      isActive: function() { return $('#search_widget').is(':visible'); },
+      resultsHeaderHtml: "<p class='search_more'>Press Enter to see all results ⏎</p>"
     });
   },
 
@@ -49,75 +35,97 @@ admin_search = {
       $('#search_widget').fadeIn();
       $('#search_term').focus();
     }
-  },
-
-  show_results : function(results) {
-    $('#menu_search_results').empty();
-    if (results.length) {
-      $('#menu_search_results').append(
-        "<p class='search_more'>Press Enter to see all results ⏎</p>"
-      );
-    }
-    for (result in results) {
-      $('#menu_search_results').append(
-        "<p><a href='" + results[result].node_path + "'>" +
-          results[result].title +
-          "<span class='result_path'>" + results[result].unique_name + "</span>" +
-        "</a></p>"
-      );
-    }
-    $('#menu_search_results').slideDown();
   }
 };
 
-menu_items = {
+function initSearchPicker(options) {
+  var inputSelector = options.inputSelector;
+  var resultsSelector = options.resultsSelector;
+  var url = options.url || ADMIN_MENU_SEARCH_URL;
+  var onSelect = options.onSelect;               // omit for a real-navigation search like admin_search
+  var isActive = options.isActive;                 // optional guard, checked before every search
+  var resultsHeaderHtml = options.resultsHeaderHtml; // optional, prepended only when results exist
+  var requestId = 0;
+  var timeout;
 
-  initialize_search : function() {
-    $("#menu_search_term").bind("input", function() {
-      if ($(this).val()) {
-        $.ajax({
-          type: "GET",
-          url: ADMIN_MENU_SEARCH_URL,
-          data: "search_term=" + $(this).val(),
-          dataType: "json",
-          success : function(results) {
-            menu_items.show_results(results);
-          }
-        });
-      }
-      else {
-        $('#search_results').slideUp();
-        $('#search_results').empty();
-      }
-    });
-  },
-
-  show_results : function(results) {
-    $("#search_results").empty();
-    for (result in results) {
-      var link = $(("<a href='#'>"+ results[result].title + "</a>"));
-      $(link).bind("click", menu_items.link_closure(results[result]));
+  $(inputSelector).bind("input", function() {
+    if (isActive && !isActive()) return;
 
+    var term = $(this).val();
+    var results = $(resultsSelector);
+    clearTimeout(timeout);
 
-      // Sometimes I don't get jquery; wrap() didn't work *sigh*
-      // Guess I'll need a book someday or another framework
-      var wrapper = $("<div></div>");
-      $(wrapper).append(link)
-
-      $("#search_results").append(wrapper);
-
+    if (!term) {
+      results.slideUp();
+      results.empty();
+      return;
     }
-  },
 
-  link_closure : function(node) {
-    var barf = function(){
-      $("#menu_item_node_id").val(node.node_id);
-      $("#menu_item_path").val("/" + node.unique_name);
-      $("#menu_item_title").val(node.title);
-      return false;
-    }
+    timeout = setTimeout(function() {
+      var thisRequest = ++requestId;
+      $.ajax({
+        type: "GET",
+        url: url,
+        data: "search_term=" + term,
+        dataType: "json",
+        success: function(nodes) {
+          if (thisRequest !== requestId) return;
+          results.empty();
+          if (nodes.length && resultsHeaderHtml) {
+            results.append(resultsHeaderHtml);
+          }
+          var found = false;
+          for (var i = 0; i < nodes.length; i++) {
+            (function(node) {
+              var link;
+              if (onSelect) {
+                link = $(
+                  "<p><a href='#'>" + node.title +
+                    "<span class='result_path'>" + node.unique_name + "</span>" +
+                  "</a></p>"
+                );
+                link.find("a").bind("click", function() {
+                  onSelect(node);
+                  results.slideUp();
+                  results.empty();
+                  return false;
+                });
+              } else {
+                link = $(
+                  "<p><a href='" + node.node_path + "'>" + node.title +
+                    "<span class='result_path'>" + node.unique_name + "</span>" +
+                  "</a></p>"
+                );
+              }
+              results.append(link);
+              found = true;
+            })(nodes[i]);
+          }
+          if (found) {
+            results.slideDown();
+          } else {
+            results.slideUp();
+          }
+        },
+        error: function(xhr, status, error) {
+          console.log("Ajax error:", status, error, xhr.status, xhr.responseText);
+        }
+      });
+    }, 250);
+  });
+}
 
-    return barf;
+menu_items = {
+  initialize_search : function() {
+    initSearchPicker({
+      inputSelector: "#menu_search_term",
+      resultsSelector: "#menu_item_search_results",
+      onSelect: function(node) {
+        $("#menu_item_node_id").val(node.node_id);
+        $("#menu_item_path").val("/" + node.unique_name);
+        $("#menu_item_title").val(node.title);
+      }
+    });
   }
 };
 
@@ -125,21 +133,13 @@ parent_search = {
   initialize_search : function() {
     parent_search.initialize_radio_buttons();
 
-    $("#parent_search_term").bind("input", function() {
-      if ($(this).val()) {
-        $.ajax({
-          type: "GET",
-          url: ADMIN_MENU_SEARCH_URL,
-          data: "search_term=" + $(this).val(),
-          dataType: "json",
-          success : function(results) {
-            parent_search.show_results(results);
-          }
-        });
-      }
-      else {
-        $('#search_results').slideUp();
-        $('#search_results').empty();
+    initSearchPicker({
+      inputSelector: "#parent_search_term",
+      resultsSelector: "#parent_search_results",
+      onSelect: function(node) {
+        $("#parent_search_term").val(node.title);
+        $("#parent_id").val(node.node_id).attr("data-unique-name", node.unique_name);
+        parent_search.update_resulting_path();
       }
     });
 
@@ -154,38 +154,6 @@ parent_search = {
     });
   },
 
-  show_results : function(results) {
-    $("#search_results").empty();
-    var found = false;
-    for (result in results) {
-
-      var link = $((
-        "<p><a href='#'>" + results[result].title +
-          "<span class='result_path'>" + results[result].unique_name + "</span>" +
-        "</a></p>"));
-
-      $(link).bind("click", parent_search.link_closure(results[result]));
-
-      $("#search_results").append(link);
-      found = true;
-    }
-    if (found)
-      $('#search_results').slideDown();
-  },
-
-  link_closure : function(node) {
-    var barf = function(){
-      $("#parent_search_term").val(node.title);
-      $("#parent_id").val(node.node_id).attr("data-unique-name", node.unique_name);
-      $('#search_results').slideUp();
-      $('#search_results').empty();
-      parent_search.update_resulting_path();
-      return false;
-    }
-
-    return barf;
-  },
-
   update_resulting_path : function() {
     var kind  = $("input[name='kind']:checked");
     var title = $("#title").val();
@@ -223,122 +191,35 @@ parent_search = {
       $("#parent_search_field").hide();
     }
   }
-}
+};
 
 move_to_search = {
   initialize_search : function() {
-    $("#move_to_search_term").bind("input", function() {move_to_search.do_search($(this))});
-  },
-
-  do_search : function(_this) {
-    if (_this.val()) {
-      $.ajax({
-        type: "GET",
-        url: ADMIN_MENU_SEARCH_URL,
-        data: "search_term=" + _this.val(),
-        dataType: "json",
-        success : function(results) {
-          move_to_search.show_results(results);
-        }
-      });
-    }
-    else {
-      $('#search_results').slideUp();
-      $('#search_results').empty();
-    }
-  },
-
-  show_results : function(results) {
-    $("#search_results").empty();
-    var found = false;
-    for (result in results) {
-      var link = $(("<a href='#'>"+ results[result].title + "</a>"));
-      $(link).bind("click", move_to_search.link_closure(results[result]));
-
-
-      // Sometimes I don't get jquery; wrap() didn't work *sigh*
-      // Guess I'll need a book someday or another framework
-      var wrapper = $("<div></div>");
-      $(wrapper).append(link)
-
-      $("#search_results").append(wrapper);
-      found = true;
-    }
-    if (found)
-      $('#search_results').slideDown();
-    else
-      $('#search_results').slideUp();
-
-  },
-
-  link_closure : function(node) {
-    var barf = function(){
-      $("#move_to_search_term").val(node.title);
-      $("#node_staged_parent_id").val(node.node_id);
-      $('#search_results').slideUp();
-      $('#search_results').empty();
-      return false;
-    }
-
-    return barf;
+    initSearchPicker({
+      inputSelector: "#move_to_search_term",
+      resultsSelector: "#move_to_search_results",
+      onSelect: function(node) {
+        $("#move_to_search_term").val(node.title);
+        $("#node_staged_parent_id").val(node.node_id);
+      }
+    });
   }
-}
+};
 
 event_search = {
   initialize_search : function() {
-    $("#event_node_search_term").bind("input", function() {
-      if ($(this).val()) {
-        $.ajax({
-          type: "GET",
-          url: ADMIN_MENU_SEARCH_URL,
-          data: "search_term=" + $(this).val(),
-          dataType: "json",
-          success : function(results) {
-            event_search.show_results(results);
-          }
-        });
-      }
-      else {
-        $('#search_results').slideUp();
-        $('#search_results').empty();
-      }
-    });
-  },
+    initSearchPicker({
+      inputSelector: "#event_node_search_term",
+      resultsSelector: "#event_search_results",
+      onSelect: function(node) {
+        $("#event_node_search_term").val(node.title);
+        $("#event_node_id").val(node.node_id);
 
-  show_results : function(results) {
-    $("#search_results").empty();
-    var found = false;
-    for (result in results) {
-      var link = $((
-        "<p><a href='#'>" + results[result].title +
-          "<span class='result_path'>" + results[result].unique_name + "</span>" +
-        "</a></p>"));
-
-      $(link).bind("click", event_search.link_closure(results[result]));
-
-      $("#search_results").append(link);
-      found = true;
-    }
-    if (found)
-      $('#search_results').slideDown();
-    else
-      $('#search_results').slideUp();
-  },
-
-  link_closure : function(node) {
-    var barf = function(){
-      $("#event_node_search_term").val(node.title);
-      $("#event_node_id").val(node.node_id);
-      $('#search_results').slideUp();
-      $('#search_results').empty();
-
-      var title_field = $("#event_title");
-      if (title_field.val() === "") {
-        $("#event_title_hint").text("Using \"" + node.title + "\" from the associated node.");
+        var title_field = $("#event_title");
+        if (title_field.val() === "") {
+          $("#event_title_hint").text("Using \"" + node.title + "\" from the associated node.");
+        }
       }
-
-      return false;
-    }
-    return barf;
+    });
   }
 };
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 5c1e489f..da315352 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -155,7 +155,6 @@ input[type=radio] {
   padding-right: 5px;
   padding-top: 1px;
   padding-bottom: 1px;
-  text-transform: lowercase;
 }
 
 #metadata a:hover {
@@ -1023,22 +1022,19 @@ div#draft_list table td.actions a {
   font-size: 18px;
 }
 
-#menu_search_results p,
-#search_results p {
+.search_results p {
   margin: 0;
   padding: 4px 4px 0 4px;
   border-bottom: 1px solid #e8e8e8;
 }
 
-#menu_search_results p a,
-#search_results p a {
+.search_results p a {
   display: block;
   font-weight: bold;
   font-size: 0.95rem;
 }
 
-#menu_search_results p span.result_path,
-#search_results p span.result_path {
+.search_results p span.result_path {
   display: block;
   margin-top: 2px;
   font-size: 0.75rem;
@@ -1047,8 +1043,7 @@ div#draft_list table td.actions a {
   padding-bottom: 4px;
 }
 
-#menu_search_results p.search_more,
-#search_results p.search_more {
+.search_results p.search_more {
   margin: 0;
   padding: 6px 4px;
   font-size: 0.8rem;