search.html

---
layout: default
---

<div class="search container max-width-2">
		<div id="search-container">
			<h3 class="center mb3 blue">Chowdown Search</h3>
		<input type="text" id="search-input" placeholder="search titles or ingredients...">
		</div>
</div>

<div class="clearfix">
<div class="recipes xs-px1 xs-mt2 center" id="results-container">

</div>
</div>





<!-- Script pointing to search-script.js -->
<script src="{{site.baseurl}}/plugins/simple-jekyll-search.min.js" type="text/javascript"></script>

<!-- Configuration -->
<script>
SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container'),
  json: '{{site.baseurl}}/search.json',
  searchResultTemplate: '<div class="sm-col sm-col-6 md-col-6 lg-col-4 xs-px1 xs-mb2 left-align"><a class="block relative bg-blue" href="{url}"><div class="image ratio bg-cover" style="background-image:url({image});"></div><h1 class="title p2 m0 absolute bold white bottom-0 left-0">{title}</h1></a></div>'
})
</script>

<script>
	$( document ).ready(function() {
    $('#search-input').on('input', function() {
    	currentHeight = $('#search-container').outerHeight();
      $('.search').addClass('used').css('height', currentHeight);
	});
	});
	
</script>