title: Remove auto search from text box and search upon search button
body: <p>I am using the jQuery datatables and I am trying to figure out how to have my search search from a "search button" and not automatically from the textbox.</p>
  
  <p>I am writing a single page application so there are more than one submit button which makes this difficult because I only want it to search from that specific search button and not upon submit to trigger the other submit buttons.</p>
  
  <p>I googled it and none of the results were successful. How do you grab the value from the input upon submit of the search button in order to adjust the datatable correctly. </p>
  
  <p>Then I want the search button to change the text to exit search to put the datatable back to its normal state as if you were to just delete the text from the textbox. Any help with this would be greatly appreciated.</p>
  
  <p>JS</p>
  
  <pre><code>// Search Mode allows to search tables
      $("#Search").on("click",function(){
          $("#ItemID").prop("disabled", false);
          $("#ESearch").show();
          $("#Search").hide();
  
        // Allows ItemID to search through database
        $('#ItemID').keyup(function(){
          oTable.search($(this).val()).draw() ;
        });
  
      });
  
      // Exit out of EXIT SEARCH mode
      $("#ESearch").on("click",function(){
          $("#ItemID").val("");
          $("#ItemID").prop("disabled", true);
          $("#Search").show();
          $("#ESearch").hide();
      });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="text" class="form-control" name="ItemID" id="ItemID" maxlength="15"&gt; 
  &lt;span class="input-group-btn"&gt;
  &lt;button type="button" class="btn btn-default" id="Search"&gt;SEARCH&lt;/button&gt;
  &lt;button style="display:none;" type="button" class="btn btn-default" id="ESearch"&gt;EXIT SEARCH&lt;/button&gt;
  &lt;/span&gt;
  </code></pre>