How to create a search for a WP_User_Query in a custom page?

Question

I tried to create a search on a custom page that contains a list of users, but I can't make it work.

I created a custom page template to mount my page, this page list some data of registered users who have the "shopkeeper" role using a "WP_User_Query" query and also a "WC_Customer" query (because some user data comes of WP_User_Query and some data comes of WC_Customer) and I would like to be able to search the results of the query on this page, with a text entry (which I called "searchInput").

Every time I do a search, it doesn't give me any results. I think something's missing.

This is my code:

<?php

/* Template Name: List Users */

...
        <form id="searchForm" method="post" >
            <input class="formControl inputSearch" placeholder="Nome da Loja, Cidade ou Estado" name="searchInput">
            <button type="submit" class="btn btn-primary">Pesquisar</button>
        </form>
        <ul id="userListContainer">
            <?php
            $searchInput = $_POST['searchInput'];

            // WP_User_Query arguments
            $args = array(
                'meta_key' => 'first_name',
                'role' => 'shopkeeper',
                'search'         => $searchInput,
                'search_columns' => array(
                    'first_name',
                    'last_name',
                    'billing_city',
                    'billing_state'
                ),
                'order' => 'ASC',
                'orderby' => 'meta_value',
                'fields' => 'all_with_meta',

                'meta_query' => array(
                    'relation' => 'OR',
                    array(
                            'key'     => 'first_name',
                            'value'   => $searchInput,
                            'compare' => 'LIKE'
                    ),
                    array(
                            'key'     => 'last_name',
                            'value'   => $searchInput,
                            'compare' => 'LIKE'
                    )
            )
            );

            // The User Query
            $users = new WP_User_Query($args);

            // User Loop
            if (!empty($users->results)) {
                foreach ($users->results as $user) {
                    // Get an instance of the WC_Customer Object from the user ID
                    $customer = new WC_Customer($user->ID);

                    $username     = $customer->get_username(); // Get username
                    $user_email   = $customer->get_email(); // Get account email
                    $first_name   = $customer->get_first_name();
                    $last_name    = $customer->get_last_name();
                    $display_name = $customer->get_display_name();

                    // Customer billing information details (from account)
                    $billing_first_name = $customer->get_billing_first_name();
                    $billing_last_name  = $customer->get_billing_last_name();
                    $billing_company    = $customer->get_billing_company();
                    $billing_address_1  = $customer->get_billing_address_1();
                    $billing_address_2  = $customer->get_billing_address_2();
                    $billing_city       = $customer->get_billing_city();
                    $billing_state      = $customer->get_billing_state();
                    $billing_postcode   = $customer->get_billing_postcode();
                    $billing_country    = $customer->get_billing_country();

                    echo
                    '<li>' .
                        '<a href="' . esc_url(get_author_posts_url($user->ID)) . '"target="_blank">' .
                            '<div id="userImage">' . get_avatar($user->ID) . '</div>' .
                            '<div id="userInfo">' . esc_attr($user->first_name) . ' ' . esc_attr($user->last_name) . '<br>' .
                                'CEP: ' . esc_attr($billing_postcode) . ' — ' . esc_attr($billing_city) . ', ' . esc_attr($billing_state) . '<br>' .
                        '</a>' .
                            '<a href="' . esc_attr($user->user_url) . '">' . esc_attr($user->user_url) . '</a>' .
                            '</div>' .
                    '</li>';
                }
            } else {
                echo 'Nenhum usuário encontrado.';
            }
            ?>
        </ul>

    </main><!-- #main -->
</div><!-- #primary -->

<?php
//do_action( 'ekommart_sidebar' );
get_footer();
?>

Any help is welcome! Thanks in advance!!

Answer 1

you can use the FiboSearch – Ajax Search for WooCommerce plugin for add the search bar on page