Expandable search bar by clicking icon in Materializecss/Material Design

Question

Working on a layout using Materializecss, and in my header/nav I need to display a search icon that, when clicked, expands the search bar.

Ideally I would like it to just take over the entire header/topnav, but anything that expands the/to a search bar is fine.

The documentation (http://materializecss.com/navbar.html) doesn't elaborate on the search bar, aside from mentioning the base code:

  <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav>

How do go about this? Is there a standard method of doing this within Materializecss/Material Design I'm not aware of?

Thanks so much

Answer 1

EDIT: look at the updated fiddle for improved version of expanding navbar search :) (without unwanted behaviour in chrome)

okay since he want something else as i thinked first, look at this fiddle. some basic jquery functions are required:

$(document).ready(function() {
var trig = 1;

  //animate searchbar width increase to  +150%
  $('#navbarsearch').click(function(e) {

   if (trig == 1){
      $('#expandtrigger').animate({
        width: '+=150'
      }, 400);
     trig ++; 
     }
    //handle other nav elements visibility here  
    $('.search-hide').addClass('hide');
  });

  // if user leaves the form the width will go back to original state

  $("#navbarsearch").focusout(function() {
    $('#expandtrigger').animate({
      width: '-=150'
    }, 400);
    trig = trig - 1;
    //handle other nav elements visibility here
        $('.search-hide').removeClass('hide');
  });

});