JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<form class="searchformhead js-search-form" method="get" action="#">
  <input type="text" name="s" class="s js-search-form_field" size="30" placeholder="Поиск">
  <input type="submit" class="searchSubmit" value="&#xf002;">
</form>

CSS

.searchformhead {
  text-align: center;
}
.searchSubmit {
  font-family: 'FontAwesome';
}
.s {
  display: none;
}

JavaScript

$(function() {
  $('.js-search-form').each(function() {
    var $search = $(this),
      $field = $('.js-search-form_field', $search);

    $search.on('submit', function(e) {
      $field
        .animate({
          width: 'toggle'
        })
        .focus();

      if (!$field.val()) {
        e.preventDefault();
      } else {                                // проверка отправки строки
        console.log(`Send ${$field.val()}`);
        $field.val('');
      }
    });
  });
});