The search form will show, on click of search icon and hide, on click of anywhere in the body except search input.

on-click-search-box-open-close.php

<div class="search-form">
	<form role="search" method="get" class="search-form mc-form bottom" action="<?php echo esc_url( home_url( '/' ) ); ?>">
		<input type="search" id="" class="search-field" placeholder="<?php esc_html_e( 'Enter your keyword', 'digimart' ) ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" />
		<button type="submit" class="search-submit"><span class="ti ti-search"></span></button>
	</form>
</div>

<script>
	$(document).ready(function () {
		
		// 1. on click open and close
		$('.dgm_header_search_icon').on('click', function () {
			var icon = $(this),
				search_parrent = icon.closest('.dgm_header_search'),
				search_field = search_parrent.find('.search-field'),
				search_form = search_parrent.find('.search-form');
			if (search_field.hasClass('show')) {
				search_field.removeClass('show');
			} else {
				search_field.addClass('show');
			}
		});
		
		// 2. on click open and on body click except search input close.
		var search_icon = $('.dgm_header_search_icon');
		var search_parrent = search_icon.closest('.dgm_header_search');
		var search_field = search_parrent.find('.search-field');
		$(document).on('click', function (e) {
			var t = $(e.target);
			// var parrent = t.parents('.dgm_cart_area');
			//console.log(t,search_icon);
			if(t[0]===search_icon[0] && !search_field.hasClass('show')){
				search_field.addClass('show');
			}else if(t[0]!==search_field[0] ){
				search_field.removeClass('show');
			}
		});
	});// Document ready end
</script>