Your Items autocompleter can add to both owned and wanted

app/stylesheets/closet_hangers/_index.sass

@@ -20,7 +20,7 @@ body.closet_hangers-index
   #closet-hangers-items-search
     float: right
 
-    input[type=search]
+    input[name=q]
       &.loading
         background:
           image: url(/images/loading.gif)
@@ -110,7 +110,7 @@ body.closet_hangers-index
       font-size: 250%
       margin: 0
 
-    span
+    span.show, span.hide
       color: $soft-text-color
       display: none
       font-size: 85%
@@ -118,9 +118,10 @@ body.closet_hangers-index
       right: 1em
       bottom: 0
 
-    &:hover span
+    &:hover
-      color: inherit
+      span.show, span.hide
-      text-decoration: underline
+        color: inherit
+        text-decoration: underline
 
   .closet-hangers-group
     border-top: 1px solid $module-border-color

app/views/closet_hangers/index.html.haml

@@ -4,7 +4,7 @@
   - content_for :before_flashes do
     = link_to "Import closet from Neopets", new_closet_page_path, :id => 'import-link'
     = form_tag items_path, :method => :get, :id => 'closet-hangers-items-search', 'data-current-user-id' => current_user.id do
-      = search_field_tag :q, nil, :placeholder => "Find items to add"
+      = text_field_tag :q, nil, :placeholder => "Find items to add"
       = submit_tag 'Search', :name => nil
 - else
   - title "#{@user.name}'s Items"
@@ -43,7 +43,10 @@
   - [true, false].each do |owned|
     .closet-hangers-group{'data-owned' => owned.to_s}
       %header
-        %h3 Items #{closet_hanger_subject} #{closet_hanger_verb(owned)}
+        %h3
+          Items
+          = closet_hanger_subject
+          %span.verb= closet_hanger_verb(owned)
         %span.show click to show
         %span.hide click to hide
       .closet-hangers-group-content

public/javascripts/closet_hangers/index.js

@@ -1,4 +1,28 @@
 (function () {
+  /*
+
+    Hanger groups
+
+  */
+
+  var hangerGroups = [];
+
+	$('div.closet-hangers-group').each(function () {
+	  var el = $(this);
+	  hangerGroups[hangerGroups.length] = {
+	    label: el.find('span.verb').text(),
+	    owned: (el.attr('data-owned') == 'true')
+	  };
+	}).find('header').click(function () {
+	  $(this).parent().toggleClass('hidden');
+	});
+
+  /*
+
+    Hanger forms
+
+  */
+
   var body = $(document.body).addClass("js");
   if(!body.hasClass("current-user")) return false;
 
@@ -124,53 +148,97 @@
     });
   });
 
+  /*
+
+    Search, autocomplete
+
+  */
+
   $('input, textarea').placeholder();
 
   var itemsSearchForm = $("#closet-hangers-items-search[data-current-user-id]");
-  var itemsSearchField = itemsSearchForm.children("input[type=search]");
+  var itemsSearchField = itemsSearchForm.children("input[name=q]");
 
   itemsSearchField.autocomplete({
     select: function (e, ui) {
-      var item = ui.item;
+      if(ui.item.is_item) {
-      itemsSearchField.addClass("loading");
+        // Let the autocompleter finish up this search before starting a new one
+        setTimeout(function () { itemsSearchField.autocomplete("search", ui.item) }, 0);
+      } else {
+        var item = ui.item.item;
+        var group = ui.item.group;
 
-      $.ajax({
+        itemsSearchField.addClass("loading");
-        url: "/user/" + itemsSearchForm.data("current-user-id") + "/items/" + item.id + "/closet_hanger",
+
-        type: "post",
+        var closetHanger = {
-        data: {closet_hanger: {quantity: 1}, return_to: window.location.pathname + window.location.search},
+          quantity: 1,
-        complete: function () {
+          owned: group.owned
-          itemsSearchField.removeClass("loading");
+        };
-        },
+
-        success: function (html) {
+        $.ajax({
-          var doc = $(html);
+          url: "/user/" + itemsSearchForm.data("current-user-id") + "/items/" + item.id + "/closet_hanger",
-          hangersEl.html( doc.find('#closet-hangers').html() );
+          type: "post",
-          quantityInputs().storeValue(); // since all the quantity inputs are new, gotta store initial value again
+          data: {closet_hanger: closetHanger, return_to: window.location.pathname + window.location.search},
-          doc.find('.flash').hide().insertBefore(hangersEl).show(500).delay(5000).hide(250);
+          complete: function () {
-          itemsSearchField.val("");
+            itemsSearchField.removeClass("loading");
-        },
+          },
-        error: function (xhr) {
+          success: function (html) {
-          handleSaveError(xhr, "adding the item");
+            var doc = $(html);
-        }
+            hangersEl.html( doc.find('#closet-hangers').html() );
-      });
+            quantityInputs().storeValue(); // since all the quantity inputs are new, gotta store initial value again
+            doc.find('.flash').hide().insertBefore(hangersEl).show(500).delay(5000).hide(250);
+            itemsSearchField.val("");
+          },
+          error: function (xhr) {
+            handleSaveError(xhr, "adding the item");
+          }
+        });
+      }
     },
     source: function (input, callback) {
-      $.getJSON("/items.json?q=" + input.term, function (data) {
+      if(typeof input.term == 'string') { // user-typed query
-        var output = [];
+        $.getJSON("/items.json?q=" + input.term, function (data) {
-        var items = data.items;
+          var output = [];
-        for(var i in items) {
+          var items = data.items;
-          items[i].label = items[i].name;
+          for(var i in items) {
-          output[output.length] = items[i];
+            items[i].label = items[i].name;
+            items[i].is_item = true;
+            output[output.length] = items[i];
+          }
+          callback(output);
+        });
+      } else { // item was chosen, now choose a group to insert
+        var groupInserts = [];
+        for(var i in hangerGroups) {
+          groupInserts[groupInserts.length] = {
+            group: hangerGroups[i],
+            item: input.term,
+            label: input.term.label
+          }
         }
-        callback(output);
+        callback(groupInserts);
-      })
+      }
     }
-  }).data( "autocomplete" )._renderItem = function( ul, item ) {
+  });
-		return $( "<li></li>" )
+
-			.data( "item.autocomplete", item )
+  var autocompleter = itemsSearchField.data("autocomplete");
-			.append( "<a>Add <strong>" + item.label + "</strong>" )
+
-			.appendTo( ul );
+  autocompleter._renderItem = function( ul, item ) {
+    var li = $("<li></li>").data("item.autocomplete", item);
+    if(item.is_item) { // these are items from the server
+      li.append("<a>Add <strong>" + item.label + "</strong>");
+    } else { // these are group inserts
+		  li.append("<a>I <strong>" + item.group.label + "</strong> the <strong>" + item.item.label + "</strong>");
+		}
+		return li.appendTo(ul);
 	}
 
+	/*
+
+	  Contact Neopets username form
+
+	*/
+
 	var contactEl = $('#closet-hangers-contact');
 	var editContactLink = $('#edit-contact-link');
 	var contactForm = contactEl.children('form');
@@ -216,10 +284,5 @@
 	  });
 	  e.preventDefault();
 	});
-
-
-	$('div.closet-hangers-group header').click(function () {
-	  $(this).parent().toggleClass('hidden');
-	});
 })();
 

public/stylesheets/compiled/screen.css

@@ -611,7 +611,7 @@ body.closet_hangers-index #closet-hangers-items-search {
   float: right;
 }
 /* line 24, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index #closet-hangers-items-search input[type=search].loading {
+body.closet_hangers-index #closet-hangers-items-search input[name=q].loading {
   background-image: url(/images/loading.gif);
   background-position: 2px center;
   background-repeat: no-repeat;
@@ -717,7 +717,7 @@ body.closet_hangers-index header h3 {
   margin: 0;
 }
 /* line 113, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index header span {
+body.closet_hangers-index header span.show, body.closet_hangers-index header span.hide {
   color: #448844;
   display: none;
   font-size: 85%;
@@ -725,28 +725,28 @@ body.closet_hangers-index header span {
   right: 1em;
   bottom: 0;
 }
-/* line 121, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 122, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index header:hover span {
+body.closet_hangers-index header:hover span.show, body.closet_hangers-index header:hover span.hide {
   color: inherit;
   text-decoration: underline;
 }
-/* line 125, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 126, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index .closet-hangers-group {
   border-top: 1px solid #006600;
   margin-bottom: 2em;
   padding-bottom: 1em;
 }
-/* line 133, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 134, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover form {
   display: inline;
 }
-/* line 136, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 137, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy {
   position: absolute;
   right: 18px;
   top: 0;
 }
-/* line 141, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 142, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input {
   /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
   -moz-border-radius: 5px;
@@ -787,7 +787,7 @@ body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-han
 body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input:hover {
   background-color: #999999;
 }
-/* line 144, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 145, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity {
   -moz-opacity: 1;
   -webkit-opacity: 1;
@@ -797,65 +797,65 @@ body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity {
   top: 56px;
   padding: 0;
 }
-/* line 150, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 151, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity span {
   display: none;
 }
-/* line 153, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 154, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=number] {
   padding: 2px;
   width: 2em;
 }
-/* line 157, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 158, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=submit] {
   font-size: 85%;
 }
-/* line 163, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 164, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=number] {
   width: 2.5em;
 }
-/* line 166, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 167, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=submit] {
   display: none;
 }
-/* line 169, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 170, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object.loading {
   background: #eeffee;
   outline: 1px solid #006600;
 }
-/* line 173, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 174, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers .object.loading .quantity span:after {
   content: "…";
 }
-/* line 177, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 178, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers-contact form {
   display: none;
 }
-/* line 180, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 181, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers-contact #edit-contact-link, body.closet_hangers-index.current-user.js #closet-hangers-contact #cancel-contact-link {
   display: inline;
 }
-/* line 184, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 185, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers-contact.editing form {
   display: block;
 }
-/* line 187, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 188, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js #closet-hangers-contact.editing #edit-contact-link {
   display: none;
 }
-/* line 191, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 192, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js .closet-hangers-group header {
   cursor: pointer;
 }
-/* line 194, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 195, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js .closet-hangers-group header .hide {
   display: block;
 }
-/* line 198, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 199, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js .closet-hangers-group.hidden header .hide, body.closet_hangers-index.current-user.js .closet-hangers-group.hidden .closet-hangers-group-content {
   display: none;
 }
-/* line 201, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 202, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index.current-user.js .closet-hangers-group.hidden header .show {
   display: block;
 }