Cacher is the code snippet organizer for pro developers

<form method="post" id="ab_search">
    <div class="search-area">
        <input type="text" name="s" placeholder="<?php _e('Search support', 'textdomain'); ?>" autocomplete="off">
        <button type="button" class="search-clear"><img src="<?= echo 'search_image_url.svg'; ?>" alt=""></button>

        <div id="search_results" class="hidden"></div>
    </div>
</form>

<?php

class Search_Form {
	public function __construct() {
		add_action( 'wp_ajax_load_search_results', array( $this, 'load_search_results' ) );
		add_action( 'wp_ajax_nopriv_load_search_results', array( $this, 'load_search_results' ) );
	}

	public function load_search_results() {
		$query = $_POST['query'];

		if( !$query ){
			echo __('Type to search', 'textdomain');
			die();
		}

		$args = array(
			'post_type' => 'support', //user your post types here
			'post_status' => 'publish',
			's' => $query
		);
		$search = new WP_Query( $args );

		ob_start();

		if ( $search->have_posts() ) :
			echo '<ul>';
			while ( $search->have_posts() ) : $search->the_post();
				?>
					<li><a href="<?php the_permalink(); ?>"><?php echo $this->pattern_replace( $query, get_the_title() ); ?></a></li>
				<?php
			endwhile;
			echo '</ul>';
		else :
			echo __('Nothing found', 'textdomain');
		endif;

		$content = ob_get_clean();

		echo $content;
		die();
	}

	public function pattern_replace( $pattern, $string ){
		$pattern = explode( ' ', $pattern );

		foreach ( $pattern as $replace ) {
			$string = str_ireplace( $replace, '<strong>' . $replace . '</strong>', $string );
		}

		return $string;
	}
}

new Search_Form();

#search_results {
  color: $black;
  position: absolute;
  background: $white;
  top: 45px;
  left: 0;
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);
  padding: 12px;
  display: none;

  ul {
    margin: 0;

    li {
      list-style: none;
      text-align: left;
      display: block;

      a {
        padding: 12px;
        font-size: 16px;
        transition: .3s;
        background: transparent;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        display: block;
        
        &:hover {
          background: $gray-400;
        }
      }
    }
  }
}

#ab_search {
  margin-top: 30px;

  div.search-area {
    max-width: 480px;
    margin: 0 auto;
    position: relative;

    &:before {
      width: 24px;
      height: 24px;
      object-fit: contain;
      content: '';
      background: url(../img/ic-search.svg) no-repeat;
      -webkit-background-size: contain;
      background-size: contain;
      position: absolute;
      top: 12px;
      left: 16px;
    }

    .search-clear {
      position: absolute;
      top: 15px;
      right: 16px;
      padding: 0;
      background: none;
      border: none;
      line-height: 1;
      display: none;
    }

    input {
      width: 100%;
      color: $black;
      padding: 12px 56px;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      border: none;
    }
  }
}

var delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();

    jQuery('input[name="s"]').keyup(function() {
        searchResults = true;
        delay(function(){
            jQuery('#ab_search').submit();
        }, 400 );

        if( !jQuery(this).val() ){
            jQuery('.search-clear').fadeOut();
        } else {
            jQuery('.search-clear').fadeIn();
        }
    });

    jQuery('input[name="s"]').focus(function () {
        if( jQuery(this).val()) jQuery('#search_results').slideDown('fast').addClass('opened');
    });

    jQuery(document).click(function() {
        if (jQuery('#search_results').hasClass('opened') && !jQuery('input[name="s"]').is(":focus")) {
            jQuery('#search_results').fadeOut('fast').removeClass('opened');
        }
    });

    jQuery('.search-clear').click(function () {
        jQuery('input[name="s"]').val('');
        jQuery(this).fadeOut();
        jQuery('#search_results').fadeOut('fast', function () {
            jQuery('#search_results').html('');
        });
    });

    jQuery(document).on( 'submit', '#ab_search', function() {
        var $form = jQuery(this);
        var $input = $form.find('input[name="s"]');
        var query = $input.val();
        var $content = jQuery('#search_results').addClass('opened');

        jQuery.ajax({
            type : 'post',
            url : sys.url, // write correct URL here
            data : {
                action : 'load_search_results',
                query : query
            },
            beforeSend: function() {
                $input.prop('disabled', true);
            },
            success : function( response ) {
                $input.prop('disabled', false);
                $content.html( response ).slideDown('fast');
                $input.focus();
            }
        });

        return false;
    });