title: Multiple Search Input's Using `this` for Value
body: <p>What I am wanting to achieve is having multiple search forms throught my website without having to call a seperate <code>selector</code> for each one. I've tried messing around with <code>this</code> to get the current value and use that on keydown but anytime I submit the search the only value I get is <code>[object Object]</code>. What am I doing wrong here?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div class="col-md-8 col-md-offset-2"&gt;
      &lt;div class="form-horizontal"&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="fa fa-search pull-left"&gt;&lt;/div&gt;
          &lt;div class="col-md-9"&gt;
            &lt;input autocomplete="off" class="form-control SearchInput" name="search" placeholder="Search for your products!" value="" type="text"&gt;
          &lt;/div&gt;
          &lt;div class="checkbox"&gt;
            &lt;label&gt;
              &lt;input type="checkbox"&gt;
              &lt;span&gt;Translate my search&lt;/span&gt;
            &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.SearchInput').bind('keydown', function(e) {
      if (e.keyCode == 13) {
              url = $('base').attr('href') + 'index.php?route=product/search';
              var search = $(this).find($('input[name=\'search\']').attr('value'));
              if (search) {
                  url += '&amp;filter_name=' + encodeURIComponent(search);
              }
              var search_directly = $("select[name='search_directly']").val();
              if (search_directly == 1) {
                  url += '&amp;search_directly=1';
              }
              location = url;
          }
      })
  </code></pre>