search-html-css-js-php
---------------------

// Shortcode for search bar
add_shortcode( 'search_bar', 'search_bar_shortcode' );
function search_bar_shortcode() {
  ob_start();
  ?>
  <style>
    div.search_result {
      display: none;
    }
  </style>

  <script>
document.addEventListener("DOMContentLoaded", (event) => {
    document.getElementById("keyword").addEventListener("keyup", function() {
        if (this.value.length >= 2) {
            document.getElementById("datafetch").style.display = "block";
        } else {
            document.getElementById("datafetch").style.display = "none";
        }
    });

    // Event listener for search result item click
    document.getElementById("datafetch").addEventListener("click", function(event) {
        if (event.target.tagName === "A") { // Check if clicked element is a link
            event.preventDefault(); // Prevent default link behavior
            var selectedItem = event.target.textContent; // Get the text content of the clicked link
            document.getElementById("keyword").value = selectedItem; // Populate search input with selected item
            document.getElementById("datafetch").style.display = "none"; // Hide the search results
        }
    });

});
  </script>
  <div class="search_bar">
<!--     <form id="search_form" action="/" method="get" autocomplete="off"> -->
	  <form id="search_form" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get" autocomplete="off">
		
	<div id="CompanyResults"> 
	<input type="text" name="s" placeholder="Search Company..." id="keyword" class="input_search" onkeyup="mukto_search_fetch()">
      <div class="search_result" id="datafetch">
        <ul>
          <li>Please wait..</li>
        </ul>
      </div></div>
     
      <select id="categories" name="categories"> <!-- Add name attribute -->
        <option value="">All Categories</option>
        <?php
        $terms = get_terms(array(
            'taxonomy' => 'categories',
            'hide_empty' => false,
        ));
        if ($terms) {
            foreach ($terms as $term) {
                $name = $term->name;
                $value = $term->slug;  // Use slug for filtering
                echo "<option value='$value'>$name</option>";
            }
        }
        ?>
      </select>

      <select id="location" name="location"> <!-- Add name attribute -->
        <option value="">All Locations</option>
        <?php
        $terms = get_terms(array(
            'taxonomy' => 'location',
            'hide_empty' => false,
        ));
        if ($terms) {
            foreach ($terms as $term) {
                $name = $term->name;
                $value = $term->slug;  // Use slug for filtering
                echo "<option value='$value'>$name</option>";
            }
        }
        ?>
      </select>	
      <button type="submit"> <!-- Change to type submit -->
        Search
      </button>
    </form>
  </div>
	
  <?php
  $content = ob_get_contents();
  ob_end_clean();
  return $content;
}
---------------------
ajax search
---------------------

add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<script type="text/javascript">
  jQuery("#location").select2();
  jQuery("#categories").select2();
  jQuery("#location").on("select2:select", function() {
    mukto_search_fetch();
  });
  jQuery("#categories").on("select2:select", function() {
    mukto_search_fetch();
  });
function mukto_search_fetch(){
 var keyword = document.getElementById("keyword").value;
 var category = document.getElementById("categories").value;
 var location = document.getElementById("location").value;


 jQuery.ajax({
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    type: 'post',
    data: {
      action: 'data_fetch',
      keyword: keyword,
      categories: category,
	location: location
	
    },
    success: function(data) {
              jQuery('#datafetch').html(data);

    }
  });
}
</script>

<?php
}

// the ajax function
add_action('wp_ajax_data_fetch', 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch', 'data_fetch');

function data_fetch() {
    $keyword = isset($_POST['keyword']) ? sanitize_text_field($_POST['keyword']) : '';
    $selected_category = isset($_POST['categories']) ? sanitize_text_field($_POST['categories']) : '';
    $selected_location = isset($_POST['location']) ? sanitize_text_field($_POST['location']) : '';

    $args = array(
        'posts_per_page' => -1,
        's' => $keyword,
        'post_type' => array('page', 'post', 'company_details'),
        'tax_query' => array(
            'relation' => 'AND', // Ensure both conditions are met
        ),
    );

    if (!empty($selected_category)) {
        $args['tax_query'][] = array(
            'taxonomy' => 'categories',
            'field' => 'slug',
            'terms' => $selected_category,
        );
    }

    if (!empty($selected_location)) {
        $args['tax_query'][] = array(
            'taxonomy' => 'location',
            'field' => 'slug',
            'terms' => $selected_location,
        );
    }

    $the_query = new WP_Query($args);

    if ($the_query->have_posts()) {
        echo '<ul>';
        while ($the_query->have_posts()) : $the_query->the_post(); ?>
            <li><a href="<?php echo esc_url(post_permalink()); ?>"><?php the_title(); ?></a></li>
        <?php endwhile;
        echo '</ul>';
        wp_reset_postdata();
    }

    die();
}