Term Life Advice: Header Top Bar Search

Documentation:

HTML:

<!-- Header Top Bar Search --> <div id="header-top-bar-search-wrapper"> <div class="container"> <div class="row"> <div id="header-top-bar-search"> <div id="header-top-bar-search-icon"> <i class="fa fa-search"></i> </div> <div id="header-top-bar-search-input"> <input type="text" name="search"> <div id="header-top-bar-search-results"> <div id="header-top-bar-search-results-returned"></div> <div id="header-top-bar-searching"><h4><i class="fa fa-spinner"></i> Searching for "<span></span>"</h4></div> </div> </div> <div id="header-top-bar-info"> <a href="<?php the_field('header_search_top_bar_button_url_left', 'option') ?>"> <div id="header-info-left"> <p><?php the_field('header_search_top_bar_button_text_left', 'option') ?></p> </div> </a> <a href="<?php the_field('header_search_top_bar_button_url_right', 'option') ?>"> <div id="header-info-right"> <p><?php the_field('header_search_top_bar_button_text_right', 'option') ?></p> </div> </a> </div> </div> </div> </div> </div>

CSS:

/* Header Top Bar Search */ $header_top_bar_search_height: 40px; #header-top-bar-search-wrapper { background: linear-gradient(90deg, #1b577d 50%, #0a2847 50%); } #header-top-bar-search { position: relative; float: left; width: 100%; height: $header_top_bar_search_height; background-color: #1b577d; div { float: left; height: 100%; display: inline-block; } } #header-top-bar-search-icon { text-align: center; width: 50px; background-color: #1b577d; color: #fff; i { margin-top: 10px; font-size: 18px; } } #header-top-bar-search-input { width: 760px; position: relative; input { background-color: #000; height: 100%; width: 100%; color: #fff; font-size: 18px; padding-left: 10px; &:focus { outline: none; } } #header-top-bar-search-results { float: left; width: 100%; position: absolute; z-index: 3; left: 0; top: $header_top_bar_search_height; background-color: #f1f1f1; height: auto; h4 { margin: 0; font-size: 14px; } a { color: inherit; } } } .header-top-bar-see-more-results { padding: 10px; background-color: #e6e6e6; width: 100%; border-top: 2px solid #bfbfbf; } .header-top-bar-search-result { float: left; width: 100%; padding: 10px; &:hover { background-color: #1b577d; h4 { color: #fff; } } } #header-top-bar-info div { width: 180px; text-align: center; p { margin: 8px 0 0 0; color: #fff; } } #header-info-left { background-color: #1b577d; } #header-info-right { background-color: #0a2847; img { width: 13px; } } #header-top-bar-search { #header-top-bar-searching { padding: 10px; color: gray; display: none; &.header-top-bar-searching-active { display: block; } } } #header-top-bar-search-results-returned { width: 100%; float: left; } @media (max-width: 1199px) { #header-top-bar-search-input { width: 560px; } } @media (max-width: 992px) { #header-top-bar-search-input { width: 340px; } } @media (max-width: 768px) { #header-top-bar-search-wrapper { height: $header_top_bar_search_height * 2; } #header-top-bar-search-input { width: 100%; padding-right: 50px; } #header-top-bar-search-icon { position: absolute; right: 0; } #header-top-bar-info { width: 100%; } #header-top-bar-info div { width: 50%; } }

JS:

// Header Top Bar Search var header_top_bar_typing_amount = 0; $('#header-top-bar-search-input input').on('keyup focusin', function() { header_top_bar_typing_amount++; var attempted_amount = header_top_bar_typing_amount; var search = $('#header-top-bar-search-input input').val(); search = search.replace(/(<([^>]+)>)/ig,""); $('#header-top-bar-search-results-returned').empty(); if (search) { $('#header-top-bar-search-results span').html(search); $('#header-top-bar-searching').addClass('header-top-bar-searching-active'); } else { $('#header-top-bar-search-results-returned').empty(); } setTimeout(function(){ search_attempt(attempted_amount); }, 500); }); function search_attempt(attempted_amount) { if (attempted_amount == header_top_bar_typing_amount) { header_top_bar_search(); } } function header_top_bar_search() { var search = $('#header-top-bar-search-input input').val(); $.post( ajaxurl, { 'action': 'header_top_bar_search', 'search': search, }, function(data) { $('#header-top-bar-search-results-returned').empty(); $('#header-top-bar-search-results-returned').append(data); $('#header-top-bar-searching').removeClass('header-top-bar-searching-active'); } ); } $(document).click(function(e) { var target = e.target; if (!$(target).is('#header-top-bar-search-input')) { $('#header-top-bar-search-results-returned').empty(); } });

PHP:

// Header Top Bar Search function acf_options_add_header_top_bar_search() { if( function_exists('acf_add_local_field_group') ): acf_add_local_field(array ( 'placement' => 'left', 'endpoint' => 0, 'key' => 'field_58888f715eaf5', 'parent' => 'theme_settings', 'label' => 'Header Top Bar Search', 'name' => '', 'type' => 'tab', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_58888fbf5eaf6', 'parent' => 'theme_settings', 'label' => 'Top Bar Button Text (Left)', 'name' => 'header_search_top_bar_button_text_left', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_58888fde5eaf7', 'parent' => 'theme_settings', 'label' => 'Top Bar Button URL (Left)', 'name' => 'header_search_top_bar_button_url_left', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_58888fe75eaf8', 'parent' => 'theme_settings', 'label' => 'Top Bar Button Text (Right)', 'name' => 'header_search_top_bar_button_text_right', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_588890365eaf9', 'parent' => 'theme_settings', 'label' => 'Top Bar Button URL (Right)', 'name' => 'header_search_top_bar_button_url_right', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); endif; } add_action( 'acf/init', 'acf_options_add_header_top_bar_search' ); function header_top_bar_search() { $search = sanitize_data($_POST["search"]); if ($search == "") { wp_die(); } $args = array('posts_per_page' => -1, 'orderby'=> 'date', 'order' => 'ASC', 's' => $search); $query = new WP_Query($args); $counter = 0; $search_limit = 5; while($query -> have_posts()) : $query -> the_post(); $title = get_the_title(); $date = get_the_date(); $permalink = get_the_permalink(); $counter++; if ($counter <= $search_limit) { echo '<a href="' . $permalink . '"><div class="header-top-bar-search-result"><h4>' . $title . '</h4></div></a>'; } endwhile; if ($counter == 0) { echo '<div class="header-top-bar-see-more-results"><h4>No search results found.</h4></div>'; } if ($counter > 5) { echo '<div class="header-top-bar-see-more-results"><a href="/?s=' . $search . '"><h4>Showing ' . $search_limit . ' out of ' . $counter . ' results. See all results <i class="fa fa-angle-right"></i></h4></a></div>'; } wp_die(); } add_action( 'wp_ajax_nopriv_header_top_bar_search', 'header_top_bar_search' ); add_action( 'wp_ajax_header_top_bar_search', 'header_top_bar_search' );