design mockup for autofilter; no new behavior yet

app/assets/javascripts/outfits/edit.js

@@ -1089,7 +1089,6 @@ View.Search = function (wardrobe) {
   var form = $('form.item-search'),
     item_set = new Partial.ItemSet(wardrobe, '#preview-search-results'),
     input_el = form.find('input[name=query]'),
-    clear_el = $('#preview-search-form-clear'),
     error_el = $('#preview-search-form-error'),
     help_el = $('#preview-search-form-help'),
     loading_el = $('#preview-search-form-loading'),
@@ -1170,12 +1169,6 @@ View.Search = function (wardrobe) {
     loadPage(1);
   });
 
-  clear_el.click(function (e) {
-    e.preventDefault();
-    input_el.val('');
-    form.submit();
-  });
-
   wardrobe.search.bind('startRequest', function () {
     loading_el.delay(1000).show('slow');
   });
@@ -1204,7 +1197,6 @@ View.Search = function (wardrobe) {
     var human_query = typeof current_query === 'string' ? current_query : '';
     input_el.val(human_query);
     no_results_span.text(human_query);
-    clear_el.toggle(!!request.query && request.query.length > 0);
   });
 
   wardrobe.search.bind('updatePagination', function (current_page, total_pages) {
@@ -1304,25 +1296,32 @@ View.Search = function (wardrobe) {
     wrapper.find('li.must-log-in input').removeAttr('disabled');
   }
 
-  var speciesNamesById = null;
+  var namesById = null;
 
-  function updateCurrentSpeciesName() {
+  function updatePetAttributes() {
-    if (speciesNamesById !== null) {
+    if (namesById !== null) {
-      var speciesId = wardrobe.outfits.getPetType().species_id;
+      var petType = wardrobe.outfits.getPetType();
-      var speciesName = speciesNamesById[speciesId];
+      var speciesName = namesById.species[petType.species_id];
       $('label[for=advanced-search-species] span').text(speciesName);
+      $('label[for=preview-search-autofilter] .species').text(speciesName);
+
+      var colorName = namesById.color[petType.color_id];
+      $('label[for=preview-search-autofilter] .color').text(colorName);
     }
   }
 
   wardrobe.pet_attributes.bind('update', function(petAttributes) {
-    speciesNamesById = {};
+    namesById = {};
-    petAttributes.species.forEach(function(species) {
+    ["species", "color"].forEach(function(key) {
-      speciesNamesById[species.id] = species.name;
+      namesById[key] = {};
+      petAttributes[key].forEach(function(attr) {
+        namesById[key][attr.id] = attr.name;
+      });
     });
-    updateCurrentSpeciesName();
+    updatePetAttributes();
   });
 
-  wardrobe.outfits.bind('updatePetType', updateCurrentSpeciesName);
+  wardrobe.outfits.bind('updatePetType', updatePetAttributes);
 }
 
 View.PrankColorMessage = function(wardrobe) {

app/assets/stylesheets/outfits/_edit.sass

@@ -306,7 +306,8 @@ body.outfits-edit
         li:first-child
           margin-bottom: .75em
 
-  #preview-search-advanced-link
+  #preview-search-advanced-link, label[for=preview-search-autofilter]
+    +inline-block
     font-size: 85%
     margin-right: 1em
   .preview-search-form-your-items
@@ -321,9 +322,6 @@ body.outfits-edit
       margin: 0 .25em
     .current
       font-weight: bold
-  #preview-search-form-clear
-    display: none
-    font-size: 85%
   #preview-search-form-loading
     display: none
     font:

app/views/outfits/edit.html.haml

@@ -101,7 +101,11 @@
         %input{:name => "query", :type => "search", autofocus: true}/
         %input{:type => "submit", :value => t('.search.form.submit')}/
         %a#preview-search-advanced-link{href: 'javascript:void(0)'}= t '.search.advanced.header'
-        %a#preview-search-form-clear{:href => "#"}= t '.search.form.clear'
+        %label{for: 'preview-search-autofilter'}
+          %input#preview-search-autofilter{type: 'checkbox', checked: true}
+          = t('.search.autofilter_html',
+            color: content_tag('span', '', :class => 'color'),
+            species: content_tag('span', '', :class => 'species'))
         #preview-search-form-pagination
       #preview-search-basic-main
         #preview-search-form-loading= t '.search.loading'

config/locales/en.yml

@@ -615,9 +615,9 @@ en:
         header: Add an item
         form:
           submit: Search
-          clear: clear
         loading: Loading…
         no_results_html: No results for "%{query}"
+        autofilter_html: Fits the %{color} %{species}
         advanced:
           header: Advanced Search
           submit: Search, advancedly!