From 9a73bec85b61492cb466ca7cb3c6e48e5491a77d Mon Sep 17 00:00:00 2001
From: Seth Call <sethcall@gmail.com>
Date: Mon, 17 Aug 2015 16:09:35 -0500
Subject: [PATCH] * wip

---
 .../javascripts/checkout_utils.js.coffee       |  2 +-
 .../JamTrackLandingScreen.js.jsx.coffee        | 18 ++++++------------
 .../client/jamtrack_landing.css.scss           | 13 +++++++++----
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/web/app/assets/javascripts/checkout_utils.js.coffee b/web/app/assets/javascripts/checkout_utils.js.coffee
index 4570bd052..c16e09f9b 100644
--- a/web/app/assets/javascripts/checkout_utils.js.coffee
+++ b/web/app/assets/javascripts/checkout_utils.js.coffee
@@ -29,7 +29,7 @@ class CheckoutUtils
 
     @logger.debug("deleted preserve billing");
 
-    unless $.cookie(@cookie_name)?
+    if $.cookie(@cookie_name)?
       @logger.error("after deleting the preserve billing cookie, it still exists!")
 
 
diff --git a/web/app/assets/javascripts/react-components/JamTrackLandingScreen.js.jsx.coffee b/web/app/assets/javascripts/react-components/JamTrackLandingScreen.js.jsx.coffee
index 4270ee588..57805b0fd 100644
--- a/web/app/assets/javascripts/react-components/JamTrackLandingScreen.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/JamTrackLandingScreen.js.jsx.coffee
@@ -36,11 +36,11 @@ MIX_MODES = context.JK.MIX_MODES
           </div>
           <h2 className="browse-jamtracks">search jamtracks</h2>
           <div className="search-area">
-            <div className="search-help"> To search by the name of the original artist, band, or song name, enter your search words below:</div>
+            <div className="search-help para"> To search by the name of the original artist, band, or song name, enter your search words below:</div>
             <div className="search-controls">
-              <input className="search-by-string" type="text" placeholder="Search for JamTracks" /><button onClick={this.searchByString} onKeyDown={this.searchKeyDown} className="search-by-string-btn button-orange ">SEARCH</button>
+              <JamTrackAutoComplete onSearch={this.search} /><button onClick={this.searchByString} className="search-by-string-btn button-orange ">SEARCH</button>
             </div>
-            <div className="filter-help">To search by genre and instrument, make your selections below:</div>
+            <div className="filter-help para">To search by genre and instrument, make your selections below:</div>
             <div className="search-controls">
               <select className="genre-list easydropdown" name="genres">
                 <option value="">Any Genre</option>
@@ -80,19 +80,13 @@ MIX_MODES = context.JK.MIX_MODES
   componentDidMount: () ->
     $root = $(@getDOMNode())
 
-  searchKeyDown: (e) ->
-    e.preventDefault();
-
-    if e.keyCode == 13
-      @searchByString(e)
+  search: (searchType, searchData) ->
+    context.JamTrackActions.requestSearch(searchType, searchData)
 
   searchByString: (e) ->
     e.preventDefault()
 
-    $root = $(@getDOMNode())
-    value = $root.find('input.search-by-string').val()
-    value = '' unless value?
-    context.JamTrackActions.requestSearch('user-input', value)
+    context.JamTrackActions.requestSearch('user-input', window.JamTrackSearchInput)
 
   searchByFilter: (e) ->
     e.preventDefault()
diff --git a/web/app/assets/stylesheets/client/jamtrack_landing.css.scss b/web/app/assets/stylesheets/client/jamtrack_landing.css.scss
index d7721a8e5..33fcb6a7c 100644
--- a/web/app/assets/stylesheets/client/jamtrack_landing.css.scss
+++ b/web/app/assets/stylesheets/client/jamtrack_landing.css.scss
@@ -5,9 +5,6 @@
   div[data-react-class="JamTrackLandingScreen"], .content-body-scroller {
     height:100%;
   }
-  input.search-by-string {
-    width:calc(100% - 96px);
-  }
   .search-by-string-btn {
     float: right;
     margin-top: 2px;
@@ -25,6 +22,13 @@
     margin:20px 0 10px 0;
     line-height:150%;
   }
+
+  .autocompleter {
+    width: calc(100% - 90px);
+    margin-bottom: 20px;
+    display:inline-block;
+  }
+
   .search-area {
     .easydropdown-wrapper{
       max-width:350px;
@@ -138,8 +142,9 @@
         margin: 4px;
       }
 
-      div {
+      .para {
         color: #cccccc;
+
       }
 
       h2.browse-jamtracks {