Custom Search Form, CPT, Multiple Text inputs

It sounds like you are trying to do something different from what that article was doing. Yours sounds like you want to search for text in the taxonomy term names, and that’s not what the WP search is for at all.
Can you briefly state what you are trying to do?

I have a custom post type, Experts, it has 3 taxonomies associated with it, Specialties, Industries, and Location. Some of those taxonomies have multiple words in them, the search works as expected when there the taxonomy only contains a single word.

The form has 3 input fields that are intended to search each of the taxonomies, I have some javascript guessing the exact names of each taxonomy, the intention is that a user can then select the one they are looking for. All it needs to do is search the names of the taxonomy, however as I said before it’s not working properly when there are multiple words in the taxonomy name.

Can you explain what you mean by “that’s not what the WP search is for at all” the article I referenced is a tutorial that creates a custom search form that searches a CPT and its taxonomy, which is basically exactly what I’m trying to do. The biggest difference being the article’s CPT has a single custom Taxonomy where mine has 3…

The article does not use the search input (s) to find a taxonomy name. s is for the WP search, and it searches the title and content.
The article uses the pre_get_posts filter to generate a tax_query parameter for the main query.

The issue I was running into with pre_get_posts is that it runs every time a page is loaded regardless of whether the form was filled out or submitted at all.

Idk, I’ll just use a plugin I guess. Oh well.

I ended up coming up with a solution to my problem that did not require any plugin. Maybe it could be of help to someone in the future.

I found that there is an HTML input element with built-in datasets that allow a user to type in what they are searching for and then it will automatically filter the items in the dataset, the dataset is displayed as a dropdown below the input field.

I created a custom function that uses a custom query to gather each custom taxonomy type, and then dynamically creates the HTML input/dataset elements

function create_taxonomy_select($tax) {
    $args = array( 'hide_empty' => false );
    $industries = get_terms($tax, $args);
    $tax_name = ucfirst(str_replace("experts_", "", $tax));
    $select_industry = '<input class="tax-list" id="'. $tax .'-container" list="' . $tax . '" placeholder="Search By '. $tax_name .'">';
    $select_industry .= '<datalist id="' . $tax . '">';
    foreach ( $industries as $term ) {
            $select_industry .= '<option data-value="' . $term->slug . '">' . $term->name . '</option>';
        }
    $select_industry .= '</datalist>';
    $select_industry .= '<input type="hidden" name="' . $tax . '" id="' . $tax . '-hidden">';
    return $select_industry;
}

Then I built the container for the search form that uses the above function to create the taxonomy fields

<div class="search-container">
	<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
		<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
	</a>
<form role="search" action="<?php echo home_url( '/' ); ?>" method="get" class="expert_searchForm" autocomplete="off">
<input type="hidden" name="post_type" value="experts" />
    <div class="searchForm__inputs">
    <?php 
        echo create_taxonomy_select('experts_industries');
    ?>
    <?php 
        echo create_taxonomy_select('experts_specialities');
    ?>
    <?php 
        echo create_taxonomy_select('experts_locations');
    ?>
        <input type="hidden">
        <input type="submit" class="input input_button" id="search__button" value="Search">
    </div>
    <div class="searchResults" id="searchResults"></div>
</form>
</div>

Finally, I had to use a bit of javascript to get the search to work properly, WordPress uses the value attribute of the dataset items to perform searches, however, the dataset displays this attribute along with the name, the JS is a workaround so that a searchable value is used (no spaces, ampersands etc) basically it dynamically adds the value attribute using the data-value attribute, this attribute is not displayed by the dataset element.

<script>

document.addEventListener("DOMContentLoaded", function(){
    var inputs = document.getElementsByClassName('tax-list');

    for (i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener('input', function(e) {
            var input = e.target,
            list = input.getAttribute('list'),
            hiddenInput = document.getElementById(list + '-hidden'),
            options = document.querySelectorAll('#' + list + ' option'),
            inputValue = input.value;
            for(var i = 0; i < options.length; i++) {
                var option = options[i];
                if(option.innerText === inputValue) {
                    hiddenInput.value = option.getAttribute('data-value');
                    break;
                }
            }
        });
    }
});
</script>

Anyhow, it works beautifully so far, and is exactly what I needed!